d3.js 不使用强制布局的节点和链接的简单图形

myzjeezk  于 2022-11-12  发布在  其他
关注(0)|答案(2)|浏览(133)

我怎样才能做出一个基本的连通图(例如两个节点和一个连接它们的链接)不使用force()布局?我只想能够拖动节点,并在拖动节点时调整链接以保持连接。我不想使用force()的任何充电或定位功能。本质上,我希望每个节点都是“粘性”的。节点仅在拖动时移动。
但是有没有简单的方法来做到这一点呢?我所看到的每一个例子都是围绕着一个力有向图建立的。
我已经看过这个例子,http://bl.ocks.org/mbostock/3750558,但是它从一个有向图开始,然后使节点具有粘性。
有没有一个基本的例子?

0x6upsns

0x6upsns1#

我做了一个小的代码片段。希望这是有帮助的。
第一个

zwghvu4y

zwghvu4y2#

Gilsha有一个很棒的答案,但是注意,较新版本的d3不再使用行为模块。
而不是这样:

var drag = d3.behavior.drag()
   .on("drag", function(d, i) {
     d.x += d3.event.dx
     d.y += d3.event.dy
     d3.select(this).attr("cx", d.x).attr("cy", d.y);
     links.each(function(l, li) {
       if (l.source == i) {
         d3.select(this).attr("x1", d.x).attr("y1", d.y);
       } else if (l.target == i) {
         d3.select(this).attr("x2", d.x).attr("y2", d.y);
       }
     });
   });

只需将d3.behavior.drag()更改为d3.drag()即可

var drag = d3.drag()
   .on("drag", function(d, i) {
     d.x += d3.event.dx
     d.y += d3.event.dy
     d3.select(this).attr("cx", d.x).attr("cy", d.y);
     links.each(function(l, li) {
       if (l.source == i) {
         d3.select(this).attr("x1", d.x).attr("y1", d.y);
       } else if (l.target == i) {
         d3.select(this).attr("x2", d.x).attr("y2", d.y);
       }
     });
   });

相关问题