D3.js 访问联接中的上一个基准

D3.js 访问联接中的上一个基准,d3.js,D3.js,我正在努力学习D3.js的概念。我意识到我可能想要将当前元素与前一个元素关联起来。让我们假设我想创建一个线图,并从一点到另一点进行绘制。我可能会创建如下内容: var data = [200, 300, 250]; var svg = d3.select('body').append('svg'); var lines = svg.selectAll('line').data(data); lines.enter() .append('line') .attr( { 'str

我正在努力学习D3.js的概念。我意识到我可能想要将当前元素与前一个元素关联起来。让我们假设我想创建一个线图,并从一点到另一点进行绘制。我可能会创建如下内容:

var data = [200, 300, 250];

var svg = d3.select('body').append('svg');
var lines = svg.selectAll('line').data(data);

lines.enter()
  .append('line')
  .attr( {
    'stroke-width': 2,
    stroke: '#000',
    x1: 0, y1: 0,
    x2: function(d, i) { return i * 50 + 50 },
    y2: function(d) { return d - 180; }
  });
()

但是,请注意,我的
x1
y1
值为零。我希望这些值来自之前的数据。如何访问以前的数据(如果没有,则假设为0,0)


注意:我意识到绘制线图的正确方法是创建一条路径并使用
d3.svg.line
生成器函数。我不想在这里解决问题。我试图理解核心概念。

我想出了一种方法。减小当前基准的索引:

var data = [200, 300, 250];

var svg = d3.select('body').append('svg');
var lines = svg.selectAll('line').data(data);

function x(d, i) { return i * 50 + 50; }
function y(d) { return d - 180; }
function previous(func, seed) {
  return function(d, i) {
    return i > 0 ? func(data[i-1], i-1) : (seed || 0);
  }
}

lines.enter()
  .append('line')
  .attr( {
    'stroke-width': 2,
    stroke: '#000',
    x1: previous(x), 
    y1: previous(y),
    x2: x,
    y2: y
  });