Wählen Sie nur Aktualisierungselemente mit d3.js

Question

Mit einem join Gibt es eine Möglichkeit, nur die "Aktualisierungs" -Elemente getrennt von den "Eingabe" -Elementen auszuwählen?

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

entering = updateAndEnter.enter(); 

exiting = updateAndEnter.exit(); 

updatingOnly = ??; 

Answer 1

Ja, die Auswahl unmittelbar nach dem Datenbeitritt enthält die Elemente "Nur aktualisieren". Nach dem Anhängen an die Eingabe() wird sie um die Eingabeelemente erweitert.

Siehe 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

es mir eine Freude ist

Für mich (auch) das ist ein wenig verwirrend: es scheint, dass der einzige verfügbare Satz + UPDATE tatsächlich ENTER (zusammen gemischt) und AUSFAHRT.

Aber was, wenn ich arbeiten oder mindestens nur aktualisierte Elemente identifizieren möchte? Ich schrieb eine sehr einfache Funktion (die folgt, einfach packen Sie es in ein Skript-Tag am Ende einer grundlegenden HTML-Seite) zeigt dieses einfache Dilemma: Wie markiere ich aktualisierte Elemente? Nur ENTER und EXIT scheint „richtig“

zu reagieren es zu testen, nur Chromkonsole eingeben:

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

I grün oder rote Markierung bekommen kann, kann ich nicht weiß bekommen

Vielleicht wir vermissen D3Js Spezifikationen?

Mit freundlichen Grüßen, 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'); 
}