在对象数组中查找多个值的d3范围
finding d3 extent of multiple values in object array
我的数据数组:
var data = [{glazed: 3.50, jelly: 4.50, powdered: 1.00, sprinkles: 3.50, age: 21, responses: 2,name:"test"},
{glazed: 2.83, jelly: 3.50, powdered: 1.83, sprinkles: 4.50, age: 22, responses: 6,name:"test"},
{glazed: 3.25, jelly: 4.75, powdered: 2.25, sprinkles: 3.50, age: 23, responses: 4,name:"test"},
{glazed: 1.50, jelly: 4.00, powdered: 2.50, sprinkles: 4.00, age: 25, responses: 2,name:"test"}];
如果我想找到釉面或果冻、粉末或撒点的程度来进行缩放,我会使用下面的代码。。
var x = d3.scale.linear()
.domain(d3.extent(data, function (d) {
return d.glazed;//or jelly etc..
}))
.range([0, width]);
我需要做什么才能得到釉面、果冻、粉末和洒布中所有值的范围,而不是年龄、反应和名称的所有值。
这是因为json文件是动态创建的,所以除了年龄、响应和名称之外,我对键值一无所知。
所以,我的要求是,它应该给我最小值1.5(从釉面)和最大值4.75(从果冻)
如有任何帮助,我们将不胜感激。。
感谢
var x = d3.scale.linear()
.domain(d3.extent(data.map(function (item) {
return (item.glazed);
})))
.range([0, width]);
map()
返回[3.5, 2.83, 3.25, 1.5]
extent()
返回[1.5, 3.5]
如果您需要data
的所有属性的绝对最小值和最大值,您应该连接数组:
var x = d3.scale.linear()
.domain(d3.extent(
[].concat(data.map(function (item) {
return (item.glazed);
}), data.map(function (item) {
return (item.jelly);
}), data.map(function (item) {
return (item.powdered);
}), data.map(function (item) {
return (item.sprinkles);
}))))
.range([0, width]);
最后,如果您有一个有价值的属性列表,您应该用匿名函数替换[].concat(...)
表达式,并立即调用它,如下所示:function(array, names){...}(data, temp)
。您应该知道,在JavaScript中,array.property
和array["property"]
是相同的调用。
var temp = ["glazed", "jelly", "powdered", "sprinkles"];
var width = 1000;
var data = [{glazed: 3.50, jelly: 4.50, powdered: 1.00, sprinkles: 3.50, age: 21, responses: 2,name:"test"},
{glazed: 2.83, jelly: 3.50, powdered: 1.83, sprinkles: 4.50, age: 22, responses: 6,name:"test"},
{glazed: 3.25, jelly: 4.75, powdered: 2.25, sprinkles: 3.50, age: 23, responses: 4,name:"test"},
{glazed: 1.50, jelly: 4.00, powdered: 2.50, sprinkles: 4.00, age: 25, responses: 2,name:"test"}];
var x = d3.scale.linear()
.domain(d3.extent(
function(array, names){
var res = [];
array.forEach(function(item){
names.forEach(function(name){
res = res.concat(item[name]);
});
});
return(res);
}(data, temp)
))
.range([0, width]);
演示:http://jsfiddle.net/v5qzuuhj/
假设您希望能够处理除age
、responses
和name
之外的任何键值,以及除glazed
、jellied
、powdered
&sprinkled
可能出现,这种方法应该可以计算最大值和最小值:
var keys_to_ignore = ["age", "responses", "name"]
data.forEach( function (row)
{
//Use d3.entries to create key'values
var data_entries = d3.entries(row)
// Add the 'current maximum' and 'current_min' based off the previous rows
// If this is the first row, the extent will be undefined
if (typeof extent !== "undefined") {
data_entries.push({"key":"current_max", "value":extent[1]})
data_entries.push({"key":"current_min", "value":extent[0]})
}
// now calculate the extent (max / min)
extent = d3.extent(data_entries, function (d) {
// Ignore specified keys
if (keys_to_ignore.indexOf(d.key) == -1) {
return d.value;
}
});
});
console.log(extent)
使用d3.entries
将创建具有键和值属性的对象,使数据更易于管理。
在这里工作小提琴:http://jsfiddle.net/henbox/aa4d0z81/
我觉得有一种更优雅的方法可以做到这一点,但我还没有弄清楚
相关文章:
- 在对象数组中查找多个值的d3范围
- 如何使用D3生成特定范围内的随机颜色
- 如何在D3.js中绘制地图投影上的点,并使用范围滑块过滤数据
- 不使用 d3 中指定的范围的线性刻度
- 如何不断更新 d3 图中 x 轴的范围
- 如何在 JavaScript for D3.js 中解决这样的范围问题
- d3.js&nvd3.js——如何设置y轴范围
- d3范围/域返回负值
- 如何将固定范围的垂直线添加到 D3.js 图表
- d3.js应用不适用于 JSON 的颜色范围
- 在 d3 中查找多个数据维度的范围
- D3.js - 如何使用比例将连续域映射到离散范围
- D3 序数刻度:将多个域值映射到同一范围
- 如何在 d3 中查找给定范围内的数据点数
- D3 时间刻度将前后时间范围添加时间间隔的百分比
- D3.js:计算随范围变化的时间尺度上的柱线宽度
- D3.js项目符号图 - 如何以 precentage(n%) 而不是仅以值 (n) 输出范围/x 轴值
- 根据 d3.js 中的数据集最小值和最大值设置轴范围
- D3 日期范围(按小时);每 7 天重复一次
- D3 onClick 处理程序在执行时似乎具有错误的范围