The layout of d3.js on elements other than svg

Question

Can d3.js layout.force be used to (re) position non-svg elements like divs?

If the div has position: absolute; maybe left and top can be used as an equivalent for the attributes x1 and y1 used for svg elements?

The goal is to have some power effects for images and menu items with IE8 support. I know svg nodes can be images, but since I need to support IE8, this is not an option.

If this is not possible, is svgweb used together with d3.js for this purpose a stable option?

Thanks!

** Update **

D3 is cool !! I am starting to impose this, and of course, you can use “force” on regular html elements such as divs like d3.layout.force() essentially gives you the x and y coordinates for each tick (or frame) that you can use as you wish.
i.e:

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

works just fine!

drag and drop using .call(force.drag); gives you problems (as expected).

arsonist:

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

Must be fixed.

Answer 1

In principle, there is nothing SVG-specific in D3. You will need to see if this works in practice for your specific application, but it certainly seems doable. Take a look, in particular, at the documentation for force.layout.on , which shows an example of updating node and link positions. If you change this code to change the corresponding attributes of a div position, it should work.

Answer 2

Here is an example showing the svg, canvas and div elements that share the same power layout: http://bl.ocks.org/4491174