Reibungslosen übergang zwischen Baum -, cluster -, radial-Baum -, radial-und cluster-layouts

Für ein Projekt, ich brauche, um interaktiv ändern hierarchische Daten-layout-Visualisierung - ohne änderung der zugrunde liegenden Daten zu löschen. Die layouts zum schalten zwischen selbst sollten Baum -, cluster -, radial-Baum -, und radial-cluster. Und der übergang sollte vorzugsweise eine animation.

Ich dachte, das wäre eine relativ einfache Aufgabe mit D3. Ich begann, aber ich habe lost in translation und Rotation, data bindings und ähnliches, also bitte ich Euch um Hilfe. Auch, wahrscheinlich bin ich etwas nicht in den Geist der D3, was ist schlecht, da Suche ich eine saubere Lösung.

Ich zusammen eine jsfidle, aber es ist nur ein Ausgangspunkt, mit zusätzlicher radio-buttons, praktische kleine Daten-set, und die anfängliche cluster-layout - nur, um zu helfen jeder, der will, nehmen Sie einen Blick auf diese. Vielen Dank im Voraus!

UPDATE:

Wollte ich den Fokus auf links, nur, damit ich vorübergehend deaktiviert andere Elemente. Aufbauend auf @AmeliaBR Methode, folgende Animationen sind erhalten:

Reibungslosen übergang zwischen Baum -, cluster -, radial-Baum -, radial-und cluster-layouts

Hier ist aktualisiert jsfiddle.

UPDATE 2:

Nun mit Kreisen: (entschuldigen Sie meine Wahl der Farben)

{doom-duba-doom}

Reibungslosen übergang zwischen Baum -, cluster -, radial-Baum -, radial-und cluster-layouts

Hier ist eine weitere aktualisierte jsfiddle.

  • Das einzige, was ich weiß, dass kommt nah an diese ist die show reel. Ich bezweifle, dass du gehst, um eine gute Antwort, hier einiges an Arbeit erforderlich sein würde, um das zu bekommen, zu arbeiten.
  • Ich hätte nie gedacht, es war so anstrengend.
  • Danke für den link.
  • Könnte es nicht sein, obwohl ich vermute, dass die übergänge reibungslos funktionieren, kann ein bisschen ein Streit sein, vor allem, wie Sie die Transformation zwischen euklidischen und polar-Koordinaten. So eine einfache Umstellung vielleicht nicht besonders schön Aussehen.
  • Danke für den link! Das ist genau das, was ich suchte. Ich werde umgestalten könnte es abit, wenn ich das Tue, werde ich nach einer neuen jsfiddle! 😉
InformationsquelleAutor VividD | 2014-01-05
  1. 5

    Habe ich nicht genug Ruf, um einen Kommentar zu...also, ich bin nur geben diese winzigen Beitrag als pseudo-Antwort. Nach einem Blick auf diese post, und basierend auf dem @VividD der perfekte Kommentar auf, wie einfach die übergänge stellte sich heraus zu sein, habe ich einfach Hinzugefügt, der Baum "Vertikal", um die Transformationen in dieser fiddle.

    Der Zusatz ist einfach:

    var diagonalVertical = d3.svg.diagonal()
    .projection(function (d) { 
        return [d.x, d.y]; 
    });

    Anyways, ich habe bookmarked dieser sehr lehrreiche Interaktion.

    • Super! Hier ist eine weitere (jsfiddle.net/VividD/s4Mjx) mit .Verzögerung( function(d, i) { return 100 * i + 500 * d....Quelle.Tiefe; } ) , nur für lacht.
    • Technik trifft Kunst!
    • Diese sehen alle wirklich toll-und vielen Dank für die Einbindung der Animationen in der main-post @VividD. Wirklich zeigt Sie das Potenzial, das layout, die Funktionen und die Vorteile der gemeinsamen D3-Struktur unter Ihnen allen.
    InformationsquelleAutor FernOfTheAndes
  2. 11

    Ich verstehe nicht, warum es wäre schwer so lang wie alle deine layouts haben die gleiche Allgemeine Struktur des link-Pfade, Kreis Knoten und Beschriftungen.

    Nur stellen Sie sicher, dass alle Objekte, einschließlich Ihrer link-Pfade, haben eine gute Daten-Schlüssel, der unabhängig von der data-Attribute erstellt, indem die layout-Funktionen. Dann für jeden übergang, aktualisieren Sie die Daten mit den Ergebnissen der entsprechenden layout-Funktion und zeichnen Sie das layout.

    Habe ich noch den übergang zur radialen Baum hier umgesetzt: http://jsfiddle.net/YV2XX/5/

    Schlüssel-code:

    //Radial Tree layout//
var diameter = 500;
var radialTree = d3.layout.tree()
    .size([360, diameter / 2 ])
    .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });
var radialDiagonal = d3.svg.diagonal.radial()
    .projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });
function transitionToRadialTree() {
  var nodes = radialTree.nodes(root), //recalculate layout
      links = radialTree.links(nodes);

    svg.transition().duration(1500)
       .attr("transform", "translate(" + (diameter/2)
                 + "," + (diameter/2) + ")");
             //set appropriate translation (origin in middle of svg)

    link.data(links, function(d){
              return d.source.name + d.target.name;})
      .transition().duration(1500)
      .attr("d", radialDiagonal); //get the new radial path

  node.data(nodes, function(d){
              return d.name ;})
      .transition().duration(1500)
      .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; }) 

  node.select("circle")
      .transition().duration(1500)
      .attr("r", 4.5);

  node.select("text")
      .transition().duration(1500)
      .attr("dy", ".31em")
      .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
      .attr("transform", function(d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; });
};

    Layout-code aus http://bl.ocks.org/mbostock/4063550, ich habe gerade es geändert werden, ein update statt einer Initialisierung.

    Beachten Sie auch, dass habe ich verschoben in die Variablendeklaration für root außerhalb des Daten-lese-Methode, so kann es wieder abgerufen werden, indem der übergang Funktionen.

    Layout muss noch einige raffiniert, aber Sie bekommen die Idee.

    Jetzt, wenn Sie wollten, einen der übergänge zu einer partition, treemap oder andere layout, dass nicht der Knoten-link-Struktur, Sie wird es komplizierter...

    • Aufschlussreiche Antwort. Die Einfachheit von links übergangs-Lösung ist, was mich erstaunt hier am meisten, im technischen Sinn. Auch ich erhöhte übergang Dauer auf 15 Sek. und das ganze sieht einfach traumhaft. Ich werde versuchen, Sie zusammen zu stellen ein Beispiel basierend auf Ihrer Methode, und wird wieder in ein paar Tagen mit dem Ergebnis...
    InformationsquelleAutor AmeliaBR
Schreibe einen Kommentar