Question

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

这是我用来创建所述数组的代码片段。

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。

最后，我附加路径的代码片段。

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

如果有人能在这里帮助我，那将是惊人的。如有必要，我可以提供更多信息。

Answer 1

警告：片段中缺少很多东西来判断这是否是唯一的问题，但无论如何---＆gt;

shipTotal将是{key：a_key，value：data_for_that_key}形式的对象数组，而不是对象本身。所以你不能通过像“00:01”这样的键来访问shipTotal，只能通过索引：0-1439来保存。令人高兴.sortKeys(d3.ascending)应该意味着您的数据已经按00:01类型键排序，并且您已经将shipTotal传递给最后一个片段（.attr("d", lijn1(shipTotal))）中的行函数，因此您不需要无论如何，参考shipTotal在d3.line片段中。试试这个：

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);
  });

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

1 个答案: