8

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

如果 divposition: absolute;可能left并且top可以用作 svg 元素中使用的x1andy1属性的等价物？

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

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

谢谢！

**更新**

D3好帅！！我开始掌握它的窍门，并且肯定可以在像 div 之类的常规 html 元素上使用“原力d3.layout.force()”，因为本质上为您可以使用的每个“tick”（或框架）提供 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);确实会给您带来问题（如预期的那样）。

萤火虫：

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

不过应该是可以修复的。

4

2 回答 2

8

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

于 2013-01-17T15:20:56.120 回答
2

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

于 2012-02-15T18:55:08.707 回答