Doppelte Werte und überlappende selectAll in D3

Question

Ich bin ein d3.js noob, ich habe gerade angefangen für eine schnelle Übung zu lernen. Ich angehängt verschiedene Texte mit verschiedenen Mustern, so dass ich verschiedene Funktionen mit der selectAll("text") Anweisung verwenden.

Aber es gab ein Problem mit diesem. Wenn ich 3 Etiketten anfüge und dann versuche, 4 weitere hinzuzufügen, wird nur die 4. angewendet. Das liegt daran, dass die selectAll diejenigen durchlaufen würde, die bereits eingefügt wurden. Beim googeln dieses Problems erfuhr ich, dass die Lösung darin bestand, .data(data, function(d){ return d; }) zu verwenden und die neuen Elemente korrekt hinzugefügt worden wären. Bis jetzt wurden alle meine Probleme gelöst.

Das Problem entsteht jetzt, dass ich die Werte "40" und "60" zweimal in zwei verschiedenen Kontexten anhängen muss, aber die doppelten Werte werden ignoriert. Wieder googelte ich für eine Lösung und kam zu diesem Post - Complex data object with duplicate 'values' = missing chart bars Es heißt, die Lösung ist, die gleiche Zeile zu entfernen, die ich bereits erwähnte oder einen anderen Wert verwenden, aber in meinem Fall habe ich es mit einem einfachen Array von Zahlen zu tun. Das Entfernen der Zeile, die vorherige Elemente enthält, hilft nicht, da die nächsten Elemente nicht angehängt werden.

EDIT: Es gibt eine Github Frage, die dieses Clarify behavior for selection.data in re. to duplicate keys. #997 bespricht - Ich fand es in keiner Weise klärend. Vielleicht werden Sie sich besser einen Sinn geben, als ich es tat ...

EDIT 2: Hier ist ein jsFiddle explaining the issue

Answer 1

Aufgrund dieser ist eine gut dokumentierte Fehler ohne zu beheben, können Sie Ihre Daten optimieren, das Hinzufügen eines Index falsche Auswahl auf Nachschlüssel verhindern:

[{index:1, value:3}, 
{index:2, value:2}, 
{index:3, value:3}] 

und Referenzierung als: d.index und d.value:

d3.select(".I997").selectAll("p") 
      .data([{index:1, value:3},{index:2, value:2},{index:3, value:3}]) 
     .enter() 
     .append("p") 
     .text(function (d) {return d.value}) 

d3.selectAll("p") 
     .data([{index:4, value:3}]) 
     .append ("p") 
     .text(function (d) {return d.value}) 

oder Sie können diese verwenden:

var ps = d3.select("body").selectAll('div') 
    .data([3, 2, 3]) 
    .enter() 
    .append('div') 
    .text(String); 

d3.selectAll('div') 
    .data([3]) 
    .append('div') 
    .text(String); 

das funktioniert, wie Sie

Hier Arbeits Code erwarten: https://jsfiddle.net/5rxadq4q/

https://jsfiddle.net/v0n8971q/1/