d3.js erzwingt Layout auf Nicht-SVG-Elementen

8

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:

%Vor%

funktioniert gut!

Das Ziehen mit .call(force.drag); führt zu Problemen (wie erwartet).

Feuerwanze:

%Vor%

Sollte jedoch reparierbar sein.

    
michael 15.02.2012, 17:34
quelle

2 Antworten

2

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.

    
Lars Kotthoff 15.02.2012, 18:55
quelle
7

Hier ist ein Beispiel, das svg-, canvas- und div-Elemente zeigt, die alle dasselbe kraftgesteuerte Layout haben: Ссылка

    
Biovisualize 17.01.2013 15:20
quelle

Tags und Links