Доступ к предыдущей привязке в соединении

Question

Я пытаюсь изучить концепции 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; } 
    }); 

(Codepen)

Заметим, однако, что мои x1 и y1 значения равны нулю. Я хочу, чтобы эти значения исходили из предыдущей даты. Как получить доступ к предыдущей системе координат (при условии, что 0,0, если их нет)?

Примечание: Я понимаю, что правильный способ сделать линейный график - создать единственный путь и использовать функцию генератора d3.svg.line. Я не пытаюсь решить проблему здесь. Я пытаюсь понять основные понятия.

Answer 1

Я придумал один подход. Уменьшить индекс текущей базы данных:

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