使用D3或javascript通过拖放在链接中创建弯曲点

我有一个由使用D3[不使用D3力]制作的各种节点/边组成的图形，它具有节点拖动功能。 我正在尝试实现一种功能，用户可以单击链接上的任何点并拖动到随机点，从而在该边上创建一个弯曲点，使其连接到源节点和目标节点之间的拖动点

我使用svg路径创建了链接，与下面的示例有点类似，下面给出的示例使用我根据原始代码中源节点和目标节点的位置计算的某个数组的数据创建了弯曲点：

var宽度=400；
var高度=400；
var svg=d3.select（'body'）。append（'svg'）；
svg.attr（'width'，width）；
svg.attr（'height'，height）；
//这就是我们上面讨论的访问器函数
var lineFunction=d3.svg.line（）
.x（函数（d）{返回d.x；}）
.y（函数（d）{返回d.y；}）
.插入（“线性”）；
//我们生产线的数据
变量lineData=[
{“x”：1，“y”：5}，
{“x”：60，“y”：30}，
{“x”：100，“y”：60}
];
//我们画的路线
var lineGraph=svg.append（“路径”）
.attr（“d”，lineFunction（lineData））
.attr（“笔划”、“蓝色”）
.attr（“笔划宽度”，2）
.attr（“填充”、“无”）；

我已经为边缘拖动问题创建了一个解决方案。尽管我们欢迎更好的解决方案

.链接{
冲程：#aaa；
}
.节点文本{
冲程：#333；
光标：指针；
}
.节点圆{
冲程：#fff；
笔画宽度：3px；
填充：#555；
}


风险值数据={
“节点”：[
{“id”：“node1”，“x”：100，“y”：400}，
{“id”：“node2”，“x”：500，“y”：200}，
{“id”：“node3”，“x”：600，“y”：120}，
{“id”：“node4”，“x”：900，“y”：400}
],
“链接”：[
{“源”：“节点2”，“目标”：“节点1”，“权重”：1，“id”：“abc”}，
{“源”：“节点3”，“目标”：“节点4”，“权重”：3，“id”：“xyz”}
]
}
可变宽度=1200，
高度=500
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
d3.json（“），函数（json）{
json=数据；
var nodes=svg.selectAll（“.node”）
.data（json.nodes）
.enter（）.append（“g”）
.attr（“类”、“节点”）；
nodes.append（“rect”）
.attr（“宽度”，“5”）.attr（“高度”，“5”）.attr（“x”，函数（d）{return d.x}）.attr（“y”，函数（d）{return d.y}）；
nodes.append（“文本”）
.attr（“dx”，12）
.attr（“dy”，“.35em”）.attr（“x”，函数（d）{return d.x}）.attr（“y”，函数（d）{return d.y}）
.text（函数（d）{return d.id}）；
var LinkCurve=“线性”；
var lineFunction=d3.svg.line（）
.x（功能（d）{
返回d.a；
})
.y（功能（d）{
返回d.b；
})
.插值（连接曲线）；
////////////////////////////////////边缘阻力//////////////////////////////
var EdgeDrag=d3.behavior.drag（）
.on（“dragstart”，dragstartedEdge）
.打开（“拖动”，拖动）
.on（“dragend”，Dragendedge）；
var firstPointBool=true；
var firstDragX=0；
var firstDragY=0；
var bendPointAddPos=0；
函数dragstartedEdge（）{
d3.selectAll（“.linkInTopology”）.classed（“selectedLink”，false）。style（“stroke”，“blue”）；
d3.选择（this）.classed（“selectedLink”，true）；
firstPointBool=true；
firstDragX=0；
firstDragY=0；
bendPointAddPos=0；
}
var controlPointsArrLinkDrag=[]；
var dragEdgeBool=false；
函数draggedEdge（d）{
dragEdgeBool=真；
d3.selectAll（“.selectedLink”）.attr（“d”，函数（l）{
if（firstPointBool）{
firstDragX=d3.event.x；
firstDragY=d3.event.y；
对于（i=0；i如果（firstAngle.toFixed（1）=secondAngle.toFixed（1）和数学最大值（l.controlPoints[i]，l.controlPoints[i+2]）>=firstDragX和数学最小值（l.controlPoints[i]，l.controlPoints[i+2]））你承诺使用v3吗？是的，我是。但是V4有一个简单的解决方案吗？不，只是因为我不喜欢用v3写答案。好的，请提供你的V4解决方案，看起来我现在必须升级了。