Zugriff auf das vorherige Datum in einem Join

Question

Ich versuche, die Konzepte von D3.js zu lernen. Ich habe festgestellt, dass ich ein aktuelles Element mit dem vorherigen Element verknüpfen möchte. Angenommen, ich möchte ein Liniendiagramm erstellen und zeichne von Punkt zu Punkt. Ich könnte so etwas wie dies erstellen:

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)

Beachten Sie jedoch, dass meine x1 und y1 Werte sind Null. Ich möchte, dass diese Werte vom vorherigen Datum kommen. Wie bekomme ich Zugriff auf das vorherige Datum (unter Annahme von 0,0, wenn es keines gibt)?

Hinweis: Mir ist klar, dass der richtige Weg, ein Liniendiagramm zeichnen zu tun ist, einen einzigen Weg zu schaffen und die d3.svg.line Generator-Funktion verwenden. Ich versuche hier kein Problem zu lösen. Ich versuche die Kernkonzepte zu verstehen.

Answer 1

Ich kam mit einem Ansatz. Verringern Sie den Index des aktuellen Datums:

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