Kann d3.js layout.force verwendet werden, um Nicht-SVG-Elemente wie divs (neu) zu positionieren?
Wenn divs position: absolute;
haben, könnten left
und top
als Äquivalent für die Attribute x1
und y1
verwendet werden, die für die SVG-Elemente verwendet werden?
Das Ziel ist es, einige Effekte auf Bilder und Menüpunkte mit IE8-Unterstützung zu haben. Ich bin mir der Tatsache bewusst, dass Svg-Knoten Bilder sein können, aber da ich IE8 unterstützen muss, ist dies keine Option.
Wenn nicht möglich, verwendet svgweb zusammen mit d3.js eine stabile Option für diesen Zweck?
>Danke!
** Aktualisieren **
D3 ist cool !! Ich fange an, den Dreh raus zu bekommen und es ist sicher möglich, " the force " auf regulären HTML-Elementen wie divs zu verwenden, da d3.layout.force()
im Wesentlichen x- und y-Koordinaten für jedes "tick" liefert (oder Rahmen), die Sie verwenden können, wie Sie wollen.
dh:
funktioniert gut!
Das Ziehen mit .call(force.drag);
führt zu Problemen (wie erwartet).
Feuerwanze:
%Vor%Sollte jedoch reparierbar sein.
Im Prinzip gibt es in D3 nichts SVG-spezifisches. Sie müssen sehen, ob es in der Praxis für Ihre spezielle Anwendung funktioniert, aber es klingt sicherlich machbar. Sehen Sie sich insbesondere die Dokumentation für force.layout.on an, die eine Beispiel, wie Knoten- und Linkpositionen aktualisiert werden. Wenn Sie diesen Code ändern, um die relevanten Positionsattribute des div zu ändern, sollte es funktionieren.
Hier ist ein Beispiel, das svg-, canvas- und div-Elemente zeigt, die alle dasselbe kraftgesteuerte Layout haben: Ссылка
Tags und Links d3.js force-layout