2012-02-15 19 views
8

Czy d3.js layout.force może być użyty do (ponownego) umieszczenia elementów innych niż svg, takich jak div?Układ force d3.js na elementach innych niż svg

Jeśli div zostały position: absolute; może left i top mogłyby zostać wykorzystane jako ekwiwalent dla x1 i y1 atrybutów stosowany dla elementów SVG?

Celem jest uzyskanie pewnych efektów siłowych na obrazach i elementach menu z obsługą IE8. Jestem świadomy faktu, że węzły svg mogą być obrazami, ale ponieważ potrzebuję wsparcia dla IE8, nie jest to opcja.

Jeśli nie jest możliwe, to przy użyciu opcjiwraz z d3.js istnieje stabilna opcja do tego celu?

Dzięki!

** Aktualizacja **

D3 jest cool !! Zaczynam go odzyskiwać i na pewno można użyć "siły" na zwykłych elementach html, takich jak divy jako d3.layout.force() zasadniczo daje współrzędne X i Y dla każdego "tick" (lub ramki), które można używaj jak chcesz.
tj:

force.nodes(data) 
    .on("tick", tick) 
    .start(); 

function tick() { 
    div.style("left", function(d) {return d.x+"px"}) 
     .style("top", function(d) {return d.y+"px"}); 
} 

działa dobrze!

przeciąganie z .call(force.drag); daje problemy (zgodnie z oczekiwaniami).

Firebug:

(container.ownerSVGElement || container).createSVGPoint is not a function 
d3_svg_mousePoint()d3.js (line 3718) 
container = div#nav 
e = mousemove clientX=607, clientY=200 
mouse()d3.js (line 3711) 
container = div#nav 
d3_behavior_dragPoint()d3.js (line 4481) 
d3_behavior_dragDispatch()d3.js (line 4453) 
type = "drag" 
d3_behavior_dragMove()d3.js (line 4491) 
l()d3.js (line 1871) 
e = mousemove clientX=607, clientY=200 
[Break On This Error] 

var point = (container.ownerSVGElement || container).createSVGPoint(); 

Powinny być naprawić chociaż.

Odpowiedz

2

Co do zasady w D3 nie ma nic charakterystycznego dla SVG. Będziesz musiał sprawdzić, czy działa w praktyce dla danej aplikacji, ale na pewno brzmi to wykonalne. Zajrzyj w szczególności pod numer the documentation for force.layout.on, który ma przykład pokazujący, jak zaktualizować pozycje węzła i łącza. Jeśli zmienisz ten kod, aby zmodyfikować odpowiednie atrybuty pozycji div, powinien działać.

Powiązane problemy