2012-02-15 20 views
8

¿Se puede usar d3.js layout.force para (re) colocar elementos que no sean svg como div's?d3.js force layout on no-svg elements

Si divs han position: absolute; quizá left y top podría ser utilizado como un equivalente para los x1 y atributos y1 que el utilizado para los elementos SVG?

El objetivo es tener algunos efectos de fuerza en las imágenes y elementos de menú con soporte IE8. Soy consciente del hecho de que los nodos svg pueden ser imágenes, pero como necesito soportar IE8, esta no es una opción.

Si no es posible, ¿está usando svgweb junto con d3.js una opción estable para este propósito?

Gracias!

** Actualización **

D3 es cool !! Estoy empezando a acostumbrarme a él y seguro que es posible usar "the force" en elementos regulares de html como divs como d3.layout.force(), esencialmente te da coordenadas xey para cada "tick" (o marco) que puedas usar como quieras
es decir:

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"}); 
} 

funciona muy bien!

arrastrando con .call(force.drag); le da problemas (como se esperaba).

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(); 

Debe ser corregible sin embargo.

Respuesta

2

En principio, no hay nada específico de SVG en D3. Deberá ver si funciona en la práctica para su aplicación particular, pero ciertamente parece factible. Eche un vistazo en particular al the documentation for force.layout.on, que tiene un ejemplo que muestra cómo actualizar las posiciones de nodo y enlace. Si cambias ese código para modificar los atributos de posición relevantes del div, debería funcionar.