如何找到数据集中的最高属性，然后显示与之关联的 "name"

Question

我对编程还是比较陌生，而且我有一个项目正在进行中。我正在为一家虚构的披萨公司制作员工效率仪表板。我想找到最快的披萨制作时间并向用户显示时间和员工姓名。

有了数据图表就很容易了。创建一个函数，然后使用 dc，例如 dc.barChart("#idOfDivInHtmlPage")

我怀疑我可能想太复杂了，而且我完全忘记了如何将 js 函数的任何输出显示到 html 页面。

我一直在使用 d3.js、dc.js 和交叉过滤器以交互方式直观地表示大部分数据。

.csv 的片段

Name,Rank,YearsService,Course,PizzaTime
Scott,Instore,3,BMC,96
Mark,Instore,4,Intro,94
Wendy,Instore,3,Intro,76

这是我目前尝试过的方法：


    var timeDim = ndx.dimension(function(d) {
        return [d.PizzaTime, d.Name]
    });

    var minStaffPizzaTimeName = timeDim.bottom(1)[0].PizzaTime;
    var maxStaffPizzaTimeName = timeDim.top(1)[0].PizzaTime;

}

然后在 html

<p id="minStaffPizzaTimeName"></p>
            <script type="text/javascript" src="static/js/graph.js">
                document.write("minStaffPizzaTimeName");
            </script>

Answer 1

你肯定是在正确的轨道上，但是在javascript你经常需要考虑事情发生的时间。

document.write()（或者更确切地说，脚本顶层的任何内容）将在页面加载时执行 .

但我敢打赌你的数据是异步加载的（可能是d3.csv），所以你稍后才会有交叉过滤器对象。您没有显示这些部分，但这是使用 crossfilter 和 dc.js.

的常用方法

因此您需要在页面加载后对其进行修改。 D3 非常适合这个！（做这件事的直接 javascript 方法并不难。）

您应该可以将 <p> 标签留在原处，删除多余的 <script> 标签，然后在创建 timeDim:[=24= 的函数中]

d3.select('#minStaffPizzaTimeName').text(minStaffPizzaTimeName);

这将查找具有该 ID 的元素并将其内容替换为您计算出的值。

通用问题解决工具

您可以使用开发工具 dom 检查器来确保 p 标签存在且 ID 为 minStaffPizzaTimeName.

你也可以使用

console.log(minStaffPizzaTimeName)

查看您是否正确获取数据。

没有运行示例很难说清楚，但我认为您将只想使用 PizzaTime 定义维度，并将其从字符串转换为数字：

var timeDim = ndx.dimension(function(d) {
    return +d.PizzaTime;
});

那么 timeDim.bottom(1)[0] 应该会为您提供原始数据中具有最低值 PizzaTime 的那一行。将 .Name 添加到该表达式应该从行对象中检索名称字段。

但您可能需要使用 console.log 或交互式调试器四处寻找才能找到有效的确切表达式。如果没有这些工具，几乎不可能使用 dc.js 或 D3，因此在学习它们方面投入一点点时间就会获得丰厚的回报。

Answer 2

砰，终于想通了。

function show_fastest_and_slowest_pizza_maker(ndx) {

    var timeDim = ndx.dimension(dc.pluck("PizzaTime"));

    var minPizzaTimeName = timeDim.bottom(1)[0].Name;
    var maxPizzaTimeName = timeDim.top(1)[0].Name;

    d3.select('#minPizzaTimeName')
        .text(minPizzaTimeName);
    d3.select('#maxPizzaTimeName')
        .text(maxPizzaTimeName);

}

非常感谢戈登，你让我走上了正确的道路！

如何找到数据集中的最高属性，然后显示与之关联的 "name"

How to find the highest attribute in a dataset, then display the "name" associated with that

d3.js

crossfilter

dc.js

通用问题解决工具