在使用 d3.js 汇总创建的数组中调用特定数据答案

【问题标题】：Calling specific data in an array created with rollup with d3.js在使用 d3.js 汇总创建的数组中调用特定数据
【发布时间】：2017-06-24 11:33:05
【问题描述】：

我目前正在研究航运数据的可视化，我正在尝试创建一个折线图，其中 xAxis 是特定日期的 00:00 到 23:59，yAxis 是特定日期的船舶数量那天的一分钟。我设法创建了一个包含 1440 个对象（每分钟一个）的数组。该数组中的每个对象如下所示：

Object with data at 00:00 hours

Object with data at 00:01 hours

这是我用来创建所述数组的代码 sn-p。

var	shipTotal = d3.nest()
  .key(function(d) {
    return d.Timestamp; 
   })
  .sortKeys(d3.ascending)
  .rollup(function(d){
    return d3.sum(d, function(g) { 
    return +g.Enen;
  });
})

.entries(data);

稍后在我的代码中，我尝试创建一个行变量，其中 X 是我的主数据集中的时间戳，Y 是我创建的数组中的值，这是船舶的数量那一分钟。

var	lijn1 = d3.line()
  .x(function(d){
    return xScale(shipTotal[d.key]);
  })
  .y(function(d, value){
    return yScale(shipTotal[d.value]);
  });

我知道 X 也很可能是错误的，但代码中的行没有 X 也没有 Y 坐标。在 Web 浏览器控制台中，该行显示 d="MNaN,NaNLNaN,NaNLNaN... 乘以 1440。

最后是我附加路径的代码 sn-p。

chartGroup.append("path")
.data([shipTotal])
.attr("class", "lijntje1")
.attr("d", lijn1(shipTotal	))
.attr("stroke", "red")
.attr("fill", "none");

如果有人可以在这里帮助我，那就太棒了。如有需要，我可以提供更多信息。

【问题讨论】：

标签： javascript arrays d3.js rollup

【解决方案1】：

警告：sn-ps 中缺少很多东西来判断这是否是唯一的问题，但无论如何 --->

shipTotal 将是 {key: a_key, value: data_for_that_key} 形式的对象数组，而不是对象本身。因此，您无法通过诸如“00:01”之类的键访问shipTotal，仅通过索引：在您的情况下为0-1439。很高兴.sortKeys(d3.ascending) 应该意味着您的数据已经按 00:01 类型键排序，并且您已经在最后一个 sn-p (.attr("d", lijn1(shipTotal))) 中将 shipTotal 传递给 line 函数，因此您不需要参考 shipTotal无论如何，在 d3.line sn-p 中。试试这个：

var lijn1 = d3.line()
  // d at this point should be an individual {key: ..., value: ...} element of the shiptotal array
  .x(function(d, i){
    // assuming xScale domain is set on [00:00, 00:01, 00:02 etc] type keys,
    // if it's 0-1439, try xScale(i) instead
    return xScale(d.key); 
  })
  .y(function(d){
    return yScale(d.value);
  });

【讨论】：