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

Question

d3.js layout.force 可以用于(重新)定位非 svg 元素，如 div 吗？

如果 div 有 position: absolute;也许left和 top可以用作 x1 的等效项和 y1用于 svg 元素的属性？

目标是在支持 IE8 的图像和菜单项上产生一些强制效果。我知道 svg 节点可以是图像，但因为我需要支持 IE8，所以这不是一个选项。

如果不可能，则使用 svgweb与 d3.js 一起为此目的的稳定选项？

谢谢!

**更新**

D3很酷!!我开始掌握它的窍门，并且肯定可以在常规 html 元素(如 div)上使用“强制”作为 d3.layout.force()基本上为您可以随意使用的每个“刻度”(或框架)提供 x 和 y 坐标。
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"});
}

工作得很好!

用 .call(force.drag); 拖动确实给你带来了问题(正如预期的那样)。

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

不过应该是可以修复的。

Answer 1

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