seleziona solo gli elementi di aggiornamento con d3.js

Question

Con un d3.jsjoin Esiste un modo per selezionare solo gli elementi di 'aggiornamento' separatamente dagli elementi di 'immissione'?

updateAndEnter = d3.selectAll('element').data(data); 

entering = updateAndEnter.enter(); 

exiting = updateAndEnter.exit(); 

updatingOnly = ??; 

Answer 1

Sì, la selezione subito dopo l'unione dati contiene gli elementi di "solo aggiornamento". Dopo essere stato aggiunto alla selezione enter(), verrà espanso per includere anche gli elementi di immissione.

Vedi General Update Pattern:

// DATA JOIN 
    // Join new data with old elements, if any. 
    var text = svg.selectAll("text") 
     .data(data); 

    // UPDATE 
    // Update old elements as needed. 
    text.attr("class", "update"); 

    // ENTER 
    // Create new elements as needed. 
    text.enter().append("text") 
     .attr("class", "enter") 
     .attr("x", function(d, i) { return i * 32; }) 
     .attr("dy", ".35em"); 

    // ENTER + UPDATE 
    // Appending to the enter selection expands the update selection to include 
    // entering elements; so, operations on the update selection after appending to 
    // the enter selection will apply to both entering and updating nodes. 
    text.text(function(d) { return d; }); 

    // EXIT 
    // Remove old elements as needed. 
    text.exit().remove(); 

Answer 2

è il mio piacere

Per me (troppo) questo è un po 'di confusione: sembra che l'unico a disposizione è in realtà ENTER + UPDATE (miscelati insieme) e USCITA.

Ma cosa succede se voglio lavorare o almeno identificare solo gli elementi aggiornati? Ho scritto una funzione molto semplice (che segue, è sufficiente metterla in un tag script alla fine di una pagina HTML di base) mostrando questo semplice dilemma: come posso evidenziare gli elementi aggiornati? Solo entrare e uscire sembrano reagire "in modo corretto"

Per provarlo, basta digitare in console chrome:

manage_p(['append','a few','paragraph']) 
manage_p(['append','a few','new','paragraph']) 
manage_p(['append','paragraphs']) 

posso ottenere evidenziazione verde o rosso, non riesco a ottenere bianco

Forse ci mancano le specifiche D3Js?

Con i migliori saluti, Fabrizio

function join_p(dataSet) { 

var el = d3.select('body'); 
var join = el 
.selectAll('p') 
.data(dataSet); 

join.enter().append('p').style('background-color','white'); 

join.style('background-color','green').text(function(d) { return d; }); 

join.exit().text('eliminato').style('background-color','red'); 
}