如何从D3.js中的嵌套访问值?

时间:2015-09-17 16:17:39

标签: javascript csv d3.js

我有一个csv文件,如下所示:

name,score,date
Bob,93,2014
Bob,85,2015
Barry,70,2015

没有两个人有相同的名字,但一个人可以有多个条目。我使用以下代码创建了nest

d3.csv("data.csv", function(data){
  data = d3.nest()
      .key(function(d){ return d.name })
      .entries(data);

巢看起来像这样:

[{key: "Bob", values: [
   {score: 93, date: 2014},
   {score: 85, date: 2015}]},
 {key: "Barry", values: [
   {score: 70, date: 2015}]}]

如何使用d3.max获得所有分数的最大值?

修改:

在测试解决方案时,我使用的数据与我的问题不同。我得到了一个结果但不是最大值。这是因为我没有明确地将我的分数值转换为+运算符的数字。

D3_GXT_Java的回答让我意识到我正在使用正确的策略,但是小的东西已经关闭了。

3 个答案:

答案 0 :(得分:2)

D3.max()采用数组,因此首先需要在处理之前将项目展平为数组。这可以使用阵列上的map然后reduce函数来完成:



var data = [{
  key: "Bob",
  values: [{
    score: 93,
    date: 2014
  }, {
    score: 85,
    date: 2015
  }]
}, {
  key: "Barry",
  values: [{
    score: 70,
    date: 2015
  }]
}];

var items = data.map(function(d) { return d.values; })
                .reduce(function(a, b) { return a.concat(b); });

console.log(items);

var max = d3.max(items, function(d) { return d.score; });
console.log(max);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
&#13;
&#13;
&#13;

答案 1 :(得分:2)

根据docs,d3.max采用第二个参数,该参数是一个返回您想要在最大计算中使用的值的函数。您可以将这些功能中的两个放在一起以获得您正在寻找的结果。

var i = [{key: "Bob", values: [
   {score: 93, date: 2014},
   {score: 85, date: 2015}]},
 {key: "Barry", values: [
   {score: 70, date: 2015}]}];


var max = d3.max(i, function(row) {
   return d3.max(row.values, function(value) {
      return value.score;
   });
});

console.log(max)

答案 2 :(得分:1)

您可以通过传递嵌套数据并返回您想要最小值和最大值的对象来获取最小值和最大值。请看this plnkr

 x.domain([d3.min(updated, function(d) {
      return d3.min(d.values, function(d) {
        return (d.score);
      });
    }),
    d3.max(updated, function(d) {
      return d3.max(d.values, function(d) {
        return (d.score);
      });
    })
  ]);

  y.domain([d3.min(updated, function(d) {
    return d3.min(d.values, function(d) {
      return  parseInt(d.date);
    });
  }), d3.max(updated, function(d) {
    return d3.max(d.values, function(d) {
      return parseInt(d.date);
    });
  })]);