javascript - 如何从对象数组中获取最大值以在 d3.scale.linear().domain() 中使用

Question

我有一个外部 csv 文件，其中的数据列如下:

name, field_goal_attempts, field_goal_makes

我正在尝试使用线性比例，但在获取域的最大值时遇到困难。

var yScale = d3.scale.linear()
               .domain(0, d3.max(...

我很困惑:

1)我应该将 yScale 函数放在外部还是内部

d3.csv("filename.csv", function(data) {

回调函数；和

2) 如何获取 field_goal_attempts 列中项目的最大值，然后将其输入 yScale 函数。

这是我目前的代码:

var yScale = d3.scale.linear()
    .domain([0, 4000]) //d3.max(data, function(d) {return d })])
    .range([0, 500]);

d3.csv("test.csv", function (data) {
    svg.selectAll("rect")
        .data(data)
        .enter()
        .append("rect")
        .attr("fill", "blue")
        .attr("x", magic_number) // I'm not concerned about the magic numbers at this point :)
        .attr("y", 0)
        .attr("width", another_magic_number)
        .attr("height", function (d) {
            return d.field_goal_attempts
        })
        .attr("id", function (d, i) {
            return i
        });
});

Answer 1

您的 csv 文件中的数据将位于您传递给 csv 函数的回调中(在您的情况下为“data”参数)。因此，您可以在 csv 函数外部定义 yScale，但如果您希望最大值依赖于数据，则需要在回调内部设置它。

至于查找最大值，许多适用于数组的 D3 函数将接受适合您场景的可选访问器函数。因此计算我将使用的最大值:

var max = d3.max(data, function(d) { return +d.field_goal_attempts;} );

因此，您可以通过以下两种方式之一将它们组合在一起:

var yScale = d3.scale.linear().domain(0,100);
d3.csv("test.csv", function(data){
    var max = d3.max(data, function(d) { return +d.field_goal_attempts;} );
    yScale.domain([0,max]);
    ...
}

或

d3.csv("test.csv", function(data){
    var max = d3.max(data, function(d) { return +d.field_goal_attempts;} );
    var yScale = d3.scale.linear().domain([0,max]);
    ...
}

如果你想同时找到最大值和最小值，那么我建议使用 d3.extent(...)，它也应该接受一个访问器函数，并将返回一个长度为 2 的数组，其中包含最小值和最大值。