在对象数组中查找多个值的d3范围

时间:2015-04-07 14:19:40

标签: javascript d3.js

我的数据阵列:

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(从果冻)

真心感谢任何帮助。

由于

2 个答案:

答案 0 :(得分:6)

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.propertyarray["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]);

DEMO:http://jsfiddle.net/v5qzuuhj/

答案 1 :(得分:1)

假设您希望能够处理除ageresponsesname以外的任何键值,以及除glazed之外的其他键值,{{1} },jellied&可能会出现powdered,此方法可用于计算最大值和最小值:

sprinkled

使用d3.entries将创建具有键和值属性的对象,使数据更易于管理。

在这里工作小提琴:http://jsfiddle.net/henbox/aa4d0z81/

我觉得有一个更优雅的方式来做到这一点,但我还没有设法弄清楚