Question

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

If div’s have position: absolute; maybe left and top could be used as a equivalent for the x1 and y1 attributes as used for the svg elements?

The goal is to have some force effects on images and menu items with IE8 support. I’m aware of the fact that svg nodes can be images but as I need to support IE8 this is not an option.

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

Thanks!

**Update**

D3 is cool!! I’m starting to get the hang of it and it sure is possible to use “the force” on regular html elements like divs as d3.layout.force() essentially gives you x and y coordinates for every “tick” (or frame) which you can use however you want.
ie:

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!

dragging with .call(force.drag); does give you problems (as expected).

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

Should be fixable though.

Answer 1

In principle there is nothing SVG-specific in D3. You will have to see if it works in practice for your particular application, but it certainly sounds feasible. Have a look in particular at the documentation for force.layout.on, which has an example showing how to update node and link positions. If you change that code to modify the relevant position attributes of the div, it should work.