Javascript 如何从路径连接多个div？

我使用svg将一个div连接到多个div。目前我只能连接一个div，但无法连接其他div。我正在申请

。例如，我想将分区A连接到B和分区A连接到C等等，如果存在N分区，则分区A必须连接到N分区：

var connections = [{
  boxA: "#box1",
  boxB: "#box2"
}, {
  boxA: "#box1",
  boxB: "#box3"
}];

const$b1=$（“#box1”）；
常量$b2=$（“#框2”）；
常量$行=$（“行”）；
var path=document.querySelector（“.path”）；
常数填充=7；
//偏移控制点的数量
var bezierWeight=0.675；
/*TweenLite.set（$b1，{x:400，y:150}）；
TweenLite.set（$b2，{x:200，y:350}）*/
常量坐标=函数（）{
常量x1=$b1.offset（）.left+$b1.width（）/2-padding；
常量y1=$b1.offset（）.top+$b1.height（）/2-padding；
常量x4=$b2.offset（）.left+$b1.width（）/2-padding；
常量y4=$b2.offset（）.top+$b1.height（）/2-padding；
var dx=数学绝对值（x4-x1）*贝塞尔重量；
var x2=x1-dx；
变量x3=x4+dx；
var data=`M${x1}${y1}${x2}${y1}${x3}${y4}${x4}${y4}`；
/*$line.attr（“x1”，x1）；
$line.attr（“y1”，y1）；
$line.attr（“x4”，x4）；
$line.attr（“y4”，y4）*/
setAttribute（“d”，数据）；
}
坐标（）；
$（'#box1'）。可拖动({
拖动：坐标
});
$（'框2'）。可拖动({
拖动：坐标
});
$（'#box3'）。可拖动({
拖动：坐标
});
.box{
边框：1px纯黑；
背景色：#ccc；
宽度：100px；
高度：100px；
位置：绝对位置；
}
#框1{
排名：0；
左：200px；
}
#框2{
顶部：200px；
左：0；
}
#框3{
顶部：200px；
左：400px；
}
.路径{
填充：无；
笔划：道奇蓝；
笔画宽度：6；
}
A
B
C
在您硬编码要连接的元素时，每个元素使用单个变量（
$b1
和
$b1
）。我建议将一个对象中两个连接框的字符串ID分组，并最终将这些对象绑定到一个数组中

因此，如果box1连接到box2并且box1连接到box3：

var connections = [{
  boxA: "#box1",
  boxB: "#box2"
}, {
  boxA: "#box1",
  boxB: "#box3"
}];

在
coordinates（）
函数中，您正在引用在html代码中设置的另一个硬编码元素：svg

Javascript有一个内置函数来动态创建元素
document.createElement（）
。但是在本例中，我们需要
document.createElements（）
，因为我们需要指定svg名称空间。这样一个动态创建的元素最终可以使用
element.appendChild（elementToBeAdded）添加到现有元素中

因此，需要修改
coordinates（）
函数，使其首先删除所有现有路径，迭代连接数组中的所有对象，并创建所需路径并将其附加到
中

下面是一个例子：


var path=document.getElementById（“路径”）；
常数填充=7；
var bezierWeight=0.675；
变量连接=[{
boxA:#box1“，
框B:“框2”
}, {
boxA:#box1“，
框B:“框3”
}];
常量坐标=函数（）{
让oldpath=path.children；
对于（设a=oldpath.length-1；a>=0；a--）{
移除child（oldpath[a]）；
}
设x1，y1，x4，y4，dx，x2，x3，路径，boxA，boxB；
for（设a=0；a
.box{
边框：1px纯黑；
背景色：#ccc；
宽度：100px；
高度：100px；
位置：绝对位置；
}
#框1{
排名：0；
左：200px；
}
#框2{
顶部：200px；
左：0；
}
#框3{
顶部：200px；
左：400px；
}
.路径{
填充：无；
笔划：道奇蓝；
笔画宽度：6；
}
A
B
C
谢谢，我得到了一些线索。对于制作N个div，我试着这样做：我已经分享了jsfiddle，这有点不同，因为我试图获得一些动态结果。如果你拖动任何一个div，你会发现这是因为你在添加新路径之前没有清除现有路径。这就是
在我上面的代码中为（让path.children的项）{path.removeChild（item）；}
所做的。我应用了你的方法。听起来我更接近了，但我的线条在移动时显示为双线。在你的代码中也有这种情况发生。你能检查一下吗？