2017-12-27 19 views
0

Ich habe ein D3-Kraftdiagramm, das dem in this example ähnelt, mit der Ausnahme, dass es mehr als 2 Kanten zwischen Knotenknoten geben kann. Ich würde gerne die Möglichkeit haben, zwischen der Visualisierung aller Kanten und nur einer einzigen geraden Kante zu wechseln. Ich habe das zum Funktionieren gebracht, indem ich einfach die Sichtbarkeit der Kanten ändere (verdeckt oder sichtbar), aber es gibt so viele Kanten zwischen den Knoten, dass es eine sichtbare Verzögerung gibt.D3 zwischen geraden Kanten und mehreren gekrümmten Kanten umschalten

Meine Idee, dies zu beheben, ist, nur die Kraftsimulation an den geraden Kanten auszuführen, anstatt auch alle gekrümmten Kanten einzubeziehen. Dies würde die Kanten auf eine Kante pro Knotenpaar beschränken, wodurch der Kraftsimulationsalgorithmus weniger intensiv wird.

Ist es möglich, die gekrümmten Kanten, die nicht im Kraftalgorithmus verwendet werden, trotzdem rendern zu können?

Antwort

0

Es sieht aus wie der größte Computer boggleneck kam tatsächlich in der .on("tick", tickActions) Schritt, wenn der Code berechnet, wie alle Pfade, auch die, die nicht sichtbar sind, zeichnen.

Für jeden, der interessiert ist, änderte ich die tick actions Funktion zunächst eine type Variable zu überprüfen, bevor die Kante Zeichnung oder nicht:

function tickActions() { 
    // plot the curved links 
    link.attr("d", function(d) { 
     if (d.type != draw_type) return null; 

     // code to draw paths 

    }); 
} 

Durch die draw_type Variable ändern, können Sie entscheiden, welche tatsächlich bekommen berechnet und gezeichnet Kanten .

Darüber hinaus müssen Sie auch die Stärke bestimmter Kanten ignorieren. Ich wusste, dass ich meinen Graph wollte auf den geraden Kanten nur im Abstand basieren, so habe ich das folgende für das simulation.force('link', link_force) Attribut:

var link_force = d3.forceLink() 

    // code for .id and .distance attributes 

    // return 0 for all non 
    .strength(function(d) { 
     if (d.type != 'straight') return 0; 
     return 0.3; 
    }); 

Durch die Stärke alles nicht gerade Kanten auf 0 gesetzt wird, wird der Kraft-Algorithmus Im Grunde ignoriert sie sie, wenn sie Knoten voneinander trennen.

Schließlich fügte ich eine restart_network() Funktion hinzu, die das Diagramm aktualisiert. Es ist möglich, diese Funktion zu verwenden, um die tatsächlichen Verbindungsdaten zu ändern, die von der Grafik gesehen werden, aber ich habe mich entschieden, auch die anderen Änderungen einzubeziehen.

function restart_network() { 
    simulation.force("link", link_force); 
    simulation.alpha(1).restart(); 
} 
Verwandte Themen