D3 pobierz poprzedni element z .data()

Question

Jak mogę uzyskać wartość poprzedniego elementu zestawu danych przekazanego do .data() w d3?

wiem w zwrotnego nie mogę zrobić coś takiego

function(d,i) { console.log(d, i); })

na przykład, aby wydrukować element danych i jego indeksu do konsoli. Ale jak mogę odwołać się do poprzedniego elementu?

Podoba mi się d[i-1] czy coś?

Answer 1

Możesz uzyskać wartość poprzedniego elementu w ten sposób.

var texts = svg.selectAll("text") 
    .data(data) 
    .enter() 
    .append("text") 
    .attr("x",function(d){ return d.x; }) 
    .attr("y",function(d){ return d.y; }) 
    .text(function(d){ return d.name; }); 

texts.attr(...,function(d,i){ 
     ...... 
     var prevData = texts.data()[i-1]; //check whether i>0 before this code 
     ....... 
    }); 

Oto mały przykład JSFiddle, Przesuń myszką nad tekstem, aby zobaczyć funkcjonalność.

Answer 2

Tam nie jest zbudowany w sposób to zrobić, ale można go osiągnąć w różnego rodzaju sposoby, w tym

Zakres:

var data = ['a','b','c','d'] 
d3.select('.parent').selectAll('.child') 
    .data(data) 
.enter() 
    .append('div') 
    .attr('class', 'child') 
    .text(function(d,i) { 
    return "previous letter is " + data[i-1]; 
    }); 

Łączenie (działa nawet jeśli są smyczki, jak w tym przykładzie)

var data = ['a','b','c','d'] 
for(var i = 0; i < data.length; i++) { data[i].previous = data[i-1]; } 
d3.select('.parent').selectAll('.child') 
    .data(data) 
... 
.text(function(d,i) { 
    return "previous letter is " + d.previous 
}); 

Via węzła nadrzędnego (doświadczalna):

var data = ['a','b','c','d'] 
d3.select('.parent').selectAll('.child') 
    .data(data) 
... 
.text(function(d,i) { 
    var parentData = d3.select(this.parentNode).selectAll('.child').data(); 
    // NOTE: parentData === data is false, but parentData still deep equals data 
    return "previous letter is " + parentData[i-1]; 
}); 

W związku z ostatnim przykładem można nawet spróbować znaleźć węzeł rodzica DOM bezpośrednio poprzedzający ten węzeł. Coś jak

... 
.text(function(d,i) { 
    var previousChild = d3.select(this.parentNode).select('.child:nth-child(' + i + ')') 
    return "previous letter is " + previousChild.datum(); 
}) 

ale dwa ostatnie mogą zawieść w różnego rodzaju sposoby, jak gdyby węzły DOM nie są uporządkowane tak samo jak data, lub jeśli istnieją inne węzły niezwiązane DOM wewnątrz rodzica.