8

d3.js layout.force を使用して、div のような非 SVG 要素を (再) 配置できますか?

div がsvg 要素に使用される属性と同等のものとして使用できる可能性がありますposition: absolute;か?lefttopx1y1

目標は、IE8 をサポートするイメージとメニュー項目に力の効果を持たせることです。svg ノードが画像になる可能性があることは承知していますが、IE8 をサポートする必要があるため、これはオプションではありません。

不可能な場合、 svgweb をd3.jsと一緒に使用することは、この目的のための安定したオプションですか?

ありがとう！

**アップデート**

D3かっこいい！！私はそれのコツをつかみ始めています.divのような通常のhtml要素で「力d3.layout.force()」を使用することは確かに可能です.欲しいです。
すなわち:

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 要素がすべて同じ force-directed レイアウトを共有していることを示す例です: http://bl.ocks.org/4491174

于 2013-01-17T15:20:56.120 に答える
2

原則として、D3 には SVG 固有のものはありません。特定のアプリケーションで実際に機能するかどうかを確認する必要がありますが、確かに実現可能に思えます。特にforce.layout.on のドキュメントを参照してください。ノードとリンクの位置を更新する方法を示す例があります。そのコードを変更して、div の関連する位置属性を変更すると、機能するはずです。

于 2012-02-15T18:55:08.707 に答える