¿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.