D3 ottiene l'elemento precedente in .data()

Question

Come posso ottenere il valore dell'elemento precedente del set di dati passato a .data() in d3?

so in un callback non posso fare qualcosa di simile

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

per esempio, per stampare l'elemento di dati e il suo indice alla console. Ma come posso fare riferimento all'elemento precedente?

Come d[i-1] o qualcosa del genere?

Answer 1

È possibile ottenere il valore dell'elemento precedente come questo.

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

Ecco un piccolo esempio JSFiddle, mouse sui testi per vedere la funzionalità.

Answer 2

ci nessun è costruito in modo per farlo, ma si può raggiungere in tutti i modi, tra cui

Ambito:

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

Linking (funziona anche se sono stringhe, come in questo esempio):

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 il nodo padre (Sperimentale):

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

Relativo all'ultimo esempio, è possibile provare a trovare il nodo DOM di pari livello immediatamente precedente a questo nodo. Qualcosa di simile

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

ma gli ultimi due può fallire in tutti i modi, come se i nodi del DOM non sono ordinati lo stesso data, o se ci sono altri nodi estranei DOM all'interno del genitore.