Question

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

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

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

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

谢谢！

的的 ** **更新

D3很酷!!我开始掌握它并确保可以在常规html元素（如div）上使用“ the force ”，d3.layout.force()基本上为每个“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。你必须看看它是否适用于你的特定应用，但它听起来确实可行。请特别关注the documentation for force.layout.on，其中有一个示例，说明如何更新节点和链接位置。如果您更改该代码以修改div的相关位置属性，它应该可以工作。

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

2 个答案: