javascript 如何从对象数组中获取最大值以在 d3.scale.linear().domain() 中使用
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/16348717/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get maximum value from an array of objects to use in d3.scale.linear().domain()
提问by Emil
I have an external csv file with data in columns like so:
我有一个外部 csv 文件,列中有数据,如下所示:
name, field_goal_attempts, field_goal_makes
I am trying to use a linear scale but am encountering difficulty getting the maximum value for my domain.
我正在尝试使用线性比例,但在为我的域获取最大值时遇到了困难。
var yScale = d3.scale.linear()
.domain(0, d3.max(...
I am confused as to:
我很困惑:
1) Whether I should put the yScale function outside or inside the
1)我应该把yScale函数放在外面还是里面
d3.csv("filename.csv", function(data) {
callback function; and
回调函数;和
2) How to get the maximum value of items in the field_goal_attempts column to then feed into the yScale function.
2) 如何获取 field_goal_attempts 列中项目的最大值,然后输入 yScale 函数。
Here is my code at present:
这是我目前的代码:
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
});
});
回答by Superboggly
The data in your csv file will be in the callback you pass to the csv function (in your case the "data" parameter). So you can define yScale outside of the csv function, but if you want the max to be data dependent you will need to set it inside the callback.
您的 csv 文件中的数据将在您传递给 csv 函数的回调中(在您的情况下为“数据”参数)。因此,您可以在 csv 函数之外定义 yScale,但如果您希望最大值与数据相关,则需要在回调中设置它。
As for finding the max, many D3 functions that work on arrays will accept optional accessor functions for precisely your scenario. So computing the max I would use:
至于寻找最大值,许多在数组上工作的 D3 函数将接受适合您场景的可选访问器函数。所以计算我会使用的最大值:
var max = d3.max(data, function(d) { return +d.field_goal_attempts;} );
So you could put it all together one of two ways:
因此,您可以通过以下两种方式之一将它们组合在一起:
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]);
...
}
or
或者
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]);
...
}
If you want to find both max and min then I suggest using d3.extent(...) which should also accept an accessor function and will return an array of length 2 with the min and max values.
如果你想同时找到最大值和最小值,那么我建议使用 d3.extent(...) ,它也应该接受一个访问器函数,并将返回一个长度为 2 的数组,其中包含最小值和最大值。
回答by Christopher Chiche
1) The yScale can stay outside of the d3.csv()
function as long as you update the domain inside of the function when having computed the max. For example you could do the following inside of d3.csv()
:
1)d3.csv()
只要在计算最大值时更新函数内部的域,yScale 就可以保留在函数之外。例如,您可以在 内部执行以下操作d3.csv()
:
yScale.domain([0, my_max])
2) To compute the max, here is the method I usually use:
2)为了计算最大值,这是我通常使用的方法:
//Create list containing only field_goal_attempts
field_goal_attempts_list = data.forEach(function(d){return d.field_goal_attempts})
//Compute max using d3.max() function
field_goal_attempts_max = d3.max(field_goal_attempts_list)
It is true that passing such function to d3.max()
would be great but as far as I know it is not. The advantage of first computing the list and then computing the max is that you do less computation if you want to compute the min, the mean or anything else.
确实,将这样的函数传递给d3.max()
会很棒,但据我所知并非如此。先计算列表然后计算最大值的优点是,如果你想计算最小值、平均值或其他任何东西,你可以减少计算量。