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

【问题标题】：d3.js force layout on non-svg elementsd3.js 在非 svg 元素上强制布局
【发布时间】：2012-02-15 17:34:36
【问题描述】：

d3.js layout.force 可以用来（重新）定位非 svg 元素，例如 div 吗？

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

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

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

谢谢！

**更新**

D3 很酷！！我开始掌握它，并且肯定可以在像 div 之类的常规 html 元素上使用“the 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();

应该是可以修复的。

【问题讨论】：

标签： d3.js force-layout

【解决方案1】：

这是一个示例，显示 svg、canvas 和 div 元素都共享相同的强制导向布局：http://bl.ocks.org/4491174

【讨论】：

【解决方案2】：

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

【讨论】：