d3js Bilevel-Partition: Ist es möglich, bestimmte Teile ohne Exit & Re-Entry zu aktualisieren?

Question

Ich verwende derzeit die d3js Bilevel-Partition, weil unsere Daten zu groß sind, um alle gleichzeitig anzuzeigen. Ich hatte zuerst die Sunburst-Partition mit den letzten Schichten, die mit CSS versteckt waren, aber dann hatte die Tabelle nicht jedes Mal die gleiche Größe, was mich verärgerte.

Ein Benutzer kann Werte mit einem Bereich Schieberegler anpassen, dies sollte die Grafik in Echtzeit aktualisieren. Das funktionierte mit diesem in der Sunburst Partition

path.data(partition.nodes) 
       .transition() 
       .duration(1000) 
       .attrTween("d", arcTweenData); 

Ist es auch möglich, etwas ähnliches in der bilevel Partition zu tun?

Also grundsätzlich sunburst partition aber mit der Bilevel-Partition oder nur 2 Zeilen jedes Mal angezeigt (wie die Bilevel-Partition).

die Lösung gefunden

ich endlich die Lösung gefunden haben, verwendet die bilevel Partition die Summe standardmäßig nicht aktualisiert, um nicht mit den auf den Wert vorgenommenen Änderungen. Ich habe den Wert vor der Aktualisierung erneut eingegeben.

path = path.data(partition.value(function (d) { return d.value}).nodes(current).slice(1)); 
     path.transition().duration(750) 
      .attrTween("d", function (d) { return arcTween.call(this, updateArc(d)); }); 

Answer 1

Bilevel unterscheidet sich von Sunburst in dem Sinne, dass, obwohl es liest und speichert die Daten/Knoten in eine Partition, es nur zwei Schichten zeigt, indem die „Kinder“ Element verwendet. Sunburst zeigt sie alle an (Standardkinder).

In Ihrem Fall, was Sie wirklich wollen, ist das Aktualisieren/Aktualisieren der Pfaddaten mit Übergängen. Dies kann leicht durch den Aufruf der Übergang auf dem Weg durchgeführt werden, wann immer Sie aktualisieren möchten:

path.transition() 
     .style("fill-opacity", 1) 
     .attrTween("d", function(d) { return arcTween.call(this, updateArc(d)); }); 

Man könnte es auf einem Intervall machen aktualisieren oder legen Sie es in einer Funktion, die aufgerufen wird, wenn sich Schaltfläche geklickt wird. Wenn Sie die d-Werte nicht aktualisieren, sondern stattdessen eine externe Datenvariable aktualisieren, Sie könnten diesen neuen Datenwert einfach mit einer globalen Variablen übergeben.

function updateVisual(d,newData){ 
path.transition() 
    .style("fill-opacity", 1) 
    .attrTween("d", function(d) { return arcTween.call(this, updateArc(newData));}); 
} // If d is updated, remove newData and use updateArc(d) 

Hinweis: Dies ist vorausgesetzt, Sie Bilevel Partition