d3.js强制非svg元素上的布局 [英] d3.js force layout on non-svg elements

问题描述

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

如果div的绝对; 也许左和顶部可以用作 x1 和 y1 属性用于svg元素？

目标是对IE8支持的图像和菜单项有一些力的影响。我知道svg节点可以是图像的事实，但因为我需要支持IE8这不是一个选项。

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

感谢！

**更新** b $ b

D3很酷！我开始得到它的悬挂，它肯定是可以使用力在常规的html元素像divs 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 function（d）{return d.y +px}）; 
} 
  

工作正常！

使用 .call（force.drag）; 拖动会产生问题（如预期）。

firebug：

 （container.ownerSVGElement || container）.createSVGPoint不是函数
 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 
l（）d3.js（line 1871）
e = mousemove clientX = 607，clientY = 200 
 [break on this错误] 
 
 var point = ownerSVGElement || container）.createSVGPoint（）; 
  

应该可以修复。

解决方案

原则上，D3中没有SVG特定的。你必须看看它是否适用于你的特定应用程序，但它肯定听起来可行。请查看 force.layout.on的文档，其中有一个示例说明如何更新节点和链接位置。如果您更改该代码以修改div的相关位置属性，则应该可以正常工作。

Can d3.js layout.force be used to (re)position non-svg elements like div's?

If div's have position: absolute; maybe left and top could be used as a equivalent for the x1 and y1 attributes as used for the svg elements?

The goal is to have some force effects on images and menu items with IE8 support. I'm aware of the fact that svg nodes can be images but as I need to support IE8 this is not an option.

If not possible, is using svgweb together with d3.js a stable option for this purpose?

Thanks!

**Update**

D3 is cool!! I'm starting to get the hang of it and it sure is possible to use "the force" on regular html elements like divs as d3.layout.force() essentially gives you x and y coordinates for every "tick" (or frame) which you can use however you want.
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"});
}

works just fine!

dragging with .call(force.drag); does give you problems (as expected).

firebug:

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

Should be fixable though.

解决方案

In principle there is nothing SVG-specific in D3. You will have to see if it works in practice for your particular application, but it certainly sounds feasible. Have a look in particular at the documentation for force.layout.on, which has an example showing how to update node and link positions. If you change that code to modify the relevant position attributes of the div, it should work.

这篇关于d3.js强制非svg元素上的布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！