Ich habe einen force-gerichteten Graphen erstellt und wollte die Form der Knoten für Daten ändern, die "entity":"company" enthalten, damit sie eine Rechteckform haben, und andere ohne diesen Teil der Daten wären Kreise wie sie jetzt sind.
Sie können mein Arbeitsbeispiel mit nur Kreisknoten hier sehen: Ссылка
Ich habe versucht, Rechtecke mit der if else -Anweisung in einem Teil des Codes hinzuzufügen, wo ich die Form an den Knoten anfüge:
Aber dann habe ich überhaupt keine Form an irgendeinem Knoten bekommen.
Was ist ein richtiger Weg, dies einzurichten?
Der ganze Code sieht so aus: Skript:
%Vor%css:
%Vor%Sie können meine jsfiddle verlinken am Anfang von Post ...
bearbeitenLösung hier: Ссылка
Ich habe das zum Laufen gebracht, indem ich jedem Knoten eine Klasse hinzugefügt habe und dann "selectAll" für jede Klasse verwendet habe, um die Shapes hinzuzufügen. Im folgenden Code füge ich eine Klasse "node" und eine Klasse hinzu, die von meinem JSON (d.type) zurückgegeben wird, das entweder "rect" oder "ellipse" ist.
%Vor%Dann können Sie die Form für alle Elemente jeder Klasse hinzufügen:
%Vor%Im obigen Beispiel habe ich Rechtecke mit Radius verwendet, um die Ellipsen zu zeichnen, da sie auf die gleiche Weise wie die Rechtecke zentriert sind. Aber es funktioniert auch mit anderen Formen. In der Datei, die ich verlinkt habe, ist die Zentrierung ausgeschaltet, aber die Formen stimmen.
Ich bin dir einen Schritt voraus:)
Ich habe Ihr Problem mit "Pfad" anstelle von "Kreis" oder "Rect" gelöst, Sie können meine Lösung suchen und mir vielleicht helfen, das Problem zu lösen, das ich habe ...
Ich habe dieses Verhalten mit der Methode filter implementiert, die ich aus Filtern in d3.js auf bl.ocks.org .
Ich habe dies innerhalb von initGraphNodeShapes call, weil mein Code relativ groß und refaktoriert ist. Der t.graphNodesEnter ist ein Verweis auf die Datenauswahl nach dem Datenbeitritt enter() , der an anderer Stelle aufgerufen wird. Ping mich, wenn du mehr Kontext brauchst. Außerdem verwende ich die d => ... Version, weil ich ES6 verwende, das Lambda aktiviert. Wenn Sie Pre-ES6 verwenden, müssen Sie es in das Formular function(d)... ändern.
Tags und Links javascript d3.js force-layout shapes