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

如何制作一个不使用

force（）

布局的基本连接图（例如两个节点和连接它们的链接）？我只想能够拖动一个节点，并在拖动节点时调整链接以保持连接。我不想要

force（）

的任何充电或定位功能。本质上，我希望每个节点都是“粘性的”。节点仅在拖动时移动

但有没有一个简单的方法可以做到这一点？我所看到的每一个例子都是围绕一个力定向图构建的

我已经看过这个例子了，但它从一个力定向图开始，然后使节点变粘。对于我想要的，这种方法似乎是倒退的

---

某个地方有一个基本的例子吗？

我制作了一个小的代码片段。希望这有帮助

var数据={
节点：[{
名称：“A”，
x:200，
y:150
}, {
名称：“B”，
x:140，
y:300
}, {
名称：“C”，
x:300，
y:300
}, {
名称：“D”，
x:300，
y:180
}],
链接：[{
资料来源：0，
目标：1
}, {
资料来源：1，
目标：2
}, {
资料来源：2，
目标：3
}, ]
};
var c10=d3.scale.category10（）；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，1200）
.attr（“高度”，800）；
var drag=d3.behavior.drag（）
.开启（“拖动”，功能（d，i）{
d、 x+=d3.event.dx
d、 y+=d3.event.dy
d3.选择（this）.attr（“cx”，d.x.）.attr（“cy”，d.y）；
链接。每个（功能（l、li）{
如果（l.source==i）{
d3.选择（此）.attr（“x1”，d.x.）.attr（“y1”，d.y）；
}else if（l.target==i）{
d3.选择（this）.attr（“x2”，d.x.）.attr（“y2”，d.y）；
}
});
});
var links=svg.selectAll（“链接”）
.数据（数据链接）
.输入（）
.附加（“行”）
.attr（“类”、“链接”）
.attr（“x1”，函数（l）{
var sourceNode=data.nodes.filter（函数（d，i）{
返回i==l.source
})[0];
d3.选择（this.attr）（“y1”，sourceNode.y）；
返回sourceNode.x
})
.attr（“x2”，函数（l）{
var targetNode=data.nodes.filter（函数（d，i）{
返回i==l.target
})[0];
d3.选择（this.attr）（“y2”，targetNode.y）；
返回targetNode.x
})
.attr（“填充”、“无”）
.attr（“笔划”、“白色”）；
var nodes=svg.selectAll（“节点”）
.data（data.nodes）
.输入（）
.附加（“圆圈”）
.attr（“类”、“节点”）
.attr（“cx”，功能（d）{
返回d.x
})
.attr（“cy”，函数（d）{
返回d.y
})
.attr（“r”，15）
.attr（“填充”，函数（d，i）{
返回c10（i）；
})
.呼叫（拖动）
svg{
背景颜色：灰色；
}
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（）

你是个巫师！在不手动指定x和y坐标并让d3计算出来的情况下，这会起作用吗？（我正试图在大型图形上实现同样的效果，并试图避免复杂的图形布局算法）
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);
       }
     });
   });