d3.js在非svg元素上强制布局

Question

是否可以使用d3.js layout.force（重新）定位非svg元素，如div的？

如果div的已position: absolute;也许left和top可以作为用于SVG元素用作x1和y1属性的相同呢？

目标是对IE8支持的图像和菜单项有一些强制效果。我意识到svg节点可以是图像，但由于我需要支持IE8，因此这不是一个选项。

如果不可行，是否将svgweb与d3.js一起用于此目的的稳定选项？

谢谢！

** **更新

D3酷！我已经开始掌握它了，它确实有可能在像div这样的常规html元素上使用“force”，因为d3.layout.force()本质上为您提供了每个“tick”（或帧）的x和y坐标，您可以然而，你想要的。
即：

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

作品就好了！

拖动.call(force.drag);的确会给你带来问题（如预期的那样）。

萤火虫：

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

应该是可以解决的，但。

Answer 1

原则上在D3中没有任何SVG特定的。您将不得不看看它是否适用于您的特定应用程序，但它确实听起来可行。请特别注意the documentation for force.layout.on，它有一个示例显示如何更新节点和链接位置。如果您更改该代码以修改div的相关位置属性，它应该可以工作。

Answer 2

下面是一个例子示出SVG，画布和div元素都共享相同的力指向布局：http://bl.ocks.org/4491174