So verhindern Sie, verschachtelte Elemente bei der Aktualisierung mit D3.js zu duplizieren

Question

Ich habe für jedes Datenelement ein SVG-Element erstellt. Nun möchte ich jedem Svg ein Pfadelement hinzufügen, aber wenn ich die Daten aktualisiere, dupliziert es dasselbe, anstatt dasselbe Element zu verwenden. Wie verhindere ich das?

Meine Daten sieht etwa so aus:

var dataset = [ 
    {"id": 1, "goalPct": 1, "curPct": 0.5}, 
    {"id": 2, "goalPct": 1, "curPct": 0.25}, 
    {"id": 3, "goalPct": 1, "curPct": 0.74} 
]; 
var dataset2 = [ 
    {"id": 1, "goalPct": 1, "curPct": 0.74}, 
    {"id": 2, "goalPct": 1, "curPct": 0.5}, 
    {"id": 3, "goalPct": 1, "curPct": 0.25} 
]; 

nun aus diesen Daten ich ein svg Element erstellt haben. Dies funktioniert genau so, wie es sollte, beim Update-Aufruf (wenn ich die neuen Daten einlege), wird es nicht dupliziert. Code:

var svg = container.selectAll("svg").data(data); 
svg.enter() 
    .append("svg"); 

svg.exit().remove(); 
svg.transition().duration(750) 

Von hier aus möchte ich einen Weg Element zu diesen svg Elemente anzuhängen, aber wenn ich die neuen Daten in schieben, es hängt nur einen neuen Weg Element statt es mit den neuen Daten zu aktualisieren. Ich kann die .data (data) -Funktion nicht zu den Pfadelementen verwenden, denn wenn ich dies tue, erstellt es einen Pfad für jedes Datenelement auf jeweils svg. (Wenn ich beispielsweise 2 Datenelemente und 3 SVGs habe, erzeugt es 2 Pfadelemente auf jedem der 3 SVGs). . Code:

var arc = svg.append("path") 
     .attr({ 
      "d": function (d, i) { 
       bronzeArc.endAngle((2 * Math.PI) * d.CurPct); 
       return bronzeArc(); 
      } 
     }); 

Ich habe versucht, die svg.exit bewegen() entfernen(); herum und das hilft mir nicht weiter. Irgendwelche Vorschläge?

Answer 1

Sie müssen Ihren append('path') Anruf auf die Eingabeauswahl verschieben. Im Moment fügen Sie immer einen neuen Pfad hinzu, auch wenn einer bereits existiert. Probieren Sie etwas wie folgt aus:

var svg = container.selectAll("svg") 
    .data(data); 
svg.enter() 
    .append("svg") 
    .append("path"); 

svg.exit() 
    .remove(); 

var arc = svg.select("path") 
    .attr({ 
     "d": function(d, i) { 
      bronzeArc.endAngle((2 * Math.PI) * d.CurPct); 
      return bronzeArc(); 
     } 
    }); 

Nun werden Sie nur anhängen Wege zu neuen SVGs, und Sie werden die d attr auf allen Pfaden aktualisieren.