D3.js Wie wird die Kartenanzeige mit neuen Daten aktualisiert?

Question

Ich versuche eine Update-Funktion für mein D3 Sunburst-Diagramm zu implementieren, wo ich die Daten ändern kann, die angezeigt werden. Ich bin in der Lage, Knoten erfolgreich hinzuzufügen oder zu entfernen.

Allerdings kann ich nicht in der Lage sein, die vorhandenen Daten zu ändern.

Zum Beispiel, wenn die Hälfte meines Diagramms entfernt wird, möchte ich für die andere Hälfte den durch das Löschen leeren Raum füllen. Das Gleiche gilt, wenn neue Daten hinzukommen, ich möchte für die vorhandenen Daten schrumpfen und nehmen weniger Platz

Hier ist meine Update-Funktion:

  function update(newData) { 
       root = newData; 
       node = root; 

       g = svg.datum(root) 
        .selectAll("g") 
        .data(partition.nodes(root)); 

       var newG = g.enter() 
        .append("g"); 

       g.exit().selectAll("path").transition().duration(5000).attrTween("d", arcTween(0)).remove();      

       path = g.selectAll("path").transition().duration(5000).attr("d", arc); 

       newG.append("path") 
        .attr("d", arc);    
      }; 

Hier ist, wie das Diagramm erstellt wird:

  function render(data) { 
       root = data; 
       node = root; 

       width = $(".burst-chart-container").height(); 
       height = ($(".burst-chart-container").width()/2); 
       radius = Math.min(width, height)/2; 

       x = d3.scale.linear().range([0, 2 * Math.PI]); 
       y = d3.scale.linear().range([0, radius]); 

       rad = Math.min(width, height)/Math.PI - 25; 

       partition = d3.layout.partition().sort(null).value(function (d) { return d.size; }); 

       arc = d3.svg.arc() 
        .startAngle(function (d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); }) 
        .endAngle(function (d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); }) 
        .innerRadius(function (d) { return Math.max(0, y(d.y)); }) 
        .outerRadius(function (d) { return Math.max(0, y(d.y + d.dy)); }); 

       svg = d3.select(element[0]).append('svg') 
        .attr("width", width).attr("height", height) 
        .attr("class", "svgDashboard") 
        .append("g") 
        .attr("transform", "translate(" + width/2 + "," + (height/2) + ")");          

       g = svg.datum(root).selectAll("g") 
        .data(partition.nodes) 
        .enter() 
        .append("g") 

       path = g.append("path") 
        .attr("d", arc) 
      } 

Ich weiß, dass path.attr("d",arc) das visuelle aktualisieren sollte, aber es funktioniert nicht in meinem Fall.

Ich denke, dass es etwas mit dem Partitionslayout zu tun hat, die den vorhandenen Bögen nicht sagen, dass sie ändern müssen, oder die Art, wie ich die Auswahl mache, um die Daten zu aktualisieren, aber ich könnte falsch liegen.

Jede Hilfe wäre willkommen.

Answer 1

Ich fand heraus, dass die path und text Daten wurden nie aktualisiert. Mein Update hat nur g Elementdaten geändert. Um es zu korrigieren, nehme ich einfach die Elterndaten und lege sie in mein Kind, nachdem ich es aktualisiert habe.

Mit diesen Änderungen kann ich meine AttrTween Funktion aufrufen, die das Visual mit den neuen Daten aktualisiert.