javascript - 如何使用csv在D3中画一条线

Question

我正在尝试使用从 CSV 输入获得的点数据在 D3 中绘制一条线。虽然我可以循环访问我的数据(在 dataSet 中)，但是否可以从下一个索引分配 x2 和 y2 坐标？

//variable 'dataSet' holds all data points
//x-coordinate in index [0], and y-coordinate in index [1]

svg.selectAll("line")
  .data(dataSet)
  .enter().append("line")
    .attr("x1", function(d){
      return d[0];
    })
    .attr("y1", function(d){
      return d[1];
    })
    .attr("x2", function(d){
      return d[0]; //here's the problem, how can I access the next x-coordinate?
    })
    .attr("y2", function(d){
      return d[1]; //here's the problem, how can I access the next y-coordinate?
    })                
    .attr("interpolate", "linear")

Answer 1

提供给selection.attr()的回调将传递当前索引作为第二个参数以及数据作为第一个参数。此索引可用于访问绑定(bind)到选择的原始 dataSet 中的下一个元素:

.attr("x2", function(d, i) {   // d is the datum, i is the index
   return dataSet[i+1][0];     // Peek ahead to the next element of the data array
}

事实上，在回调中您可以放心地假设 d === dataSet[i]。

但请记住，当向前查看时，这最终会为最后一个数据抛出一个 RangeError，因为 i + 1 将引用一个不存在的数据倒数第二个元素。为了防止这种情况，您需要实现一项检查，根据您的情况，可能是这样的:

1. 绘制一条零长度线以直观地结束连接线:

   dataSet[Math.min(i + 1, dataSet.length - 1)]
   

2. 通过将最后一个点连接到第一个点来闭合线条:

   dataSet[(i + 1) % dataSet.length]
   

将所有这些放在一起，您的解决方案可能如下所示:

var len = dataSet.length;

function next(i) {
  var nextIndex = Math.min(i + 1, len - 1);  // open 
  // var nextIndex =(i + 1) % len;           // closed
  return dataSet[nextIndex];
}

svg.selectAll("line")
  .data(dataSet)
  .enter().append("line")
    // ... set x1, x2
    .attr("x2", function(d, i) {
      return next(i)[0];
    })
    .attr("y2", function(d, i) {
      return next(i)[1];
    });