d3.js在非svg元素上強制佈局

Question

是否可以使用d3.js layout.force（重新）定位非svg元素，如div的？

如果div的已position: absolute;也許left和top可以作爲用於SVG元素用作x1和y1屬性的相同呢？

目標是對IE8支持的圖像和菜單項有一些強制效果。我意識到svg節點可以是圖像，但由於我需要支持IE8，因此這不是一個選項。

如果不可行，是否將svgweb與d3.js一起用於此目的的穩定選項？

謝謝！

** **更新

D3酷！我已經開始掌握它了，它確實有可能在像div這樣的常規html元素上使用「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

原則上在D3中沒有任何SVG特定的。您將不得不看看它是否適用於您的特定應用程序，但它確實聽起來可行。請特別注意the documentation for force.layout.on，它有一個示例顯示如何更新節點和鏈接位置。如果您更改該代碼以修改div的相關位置屬性，它應該可以工作。

Answer 2

下面是一個例子示出SVG，畫布和div元素都共享相同的力指向佈局：http://bl.ocks.org/4491174