d3.js强制非svg元素的布局

Question

可以用d3.js layout.force来(重新)定位像div这样的非svg元素吗？

如果div position: absolute;可能left并且top可以用作svg元素的x1和y1属性的等价物？

目标是通过IE8支持对图像和菜单项产生一些强制效果.我知道svg节点可以是图像,但由于我需要支持IE8,因此这不是一个选项.

如果不可能,将svgweb和d3.js一起用于此目的的稳定选项？

谢谢!

****更新

D3真酷!我开始了解它并且肯定可以在常规html元素(如div)上使用" 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

这是一个显示svg,canvas和div元素的示例,它们共享相同的强制定向布局:http://bl.ocks.org/4491174

Answer 2

原则上，D3 中没有任何特定于 SVG 的内容。您必须看看它在实践中是否适用于您的特定应用程序，但这听起来确实可行。请特别查看force.layout.on 的文档，其中有一个示例显示如何更新节点和链接位置。如果您更改该代码来修改 div 的相关位置属性，它应该可以工作。