Javascript D3如何从粘性效应中排除链接

问题：粘性效应也适用于链接。这将创建一个泪滴形状的框架，而不是一个圆

被剪断的节点包含一个

draugd（）

函数，该函数允许用户从节点0中删除节点1。此外，还可以借助拖动再次连接节点1和节点0。代码一点也不干净，因为它只是一个游乐场

目标：如何在某种程度上排除粘性效果中的链接，以确保所有链接都正确显示，并且仍然实现正确的圆圈形状。胶粘效果的形状可以通过将-5更改为-40来操纵，不幸的是，它将完全隐藏链接：

.attr("values", "1 1 1 1 1  1 1 1 1 1  1 1 1 1 1  0 0 0 50 -5")

D3v6游乐场
身体{
溢出：隐藏；
边际：0px；
}
.帆布{
背景色：rgb（220、220、220）；
}
.节点{
光标：指针；
}
.节点：悬停{
笔画：红色
}
.链接{
填充：无；
游标：默认值；
笔划：rgb（0,0,0）；
笔画宽度：3px；
}
变量图={
“节点”：[
{
“id”：0，
},
{
“id”：1，
},
{
“id”：2，
}
],
“链接”：[
{
“来源”：1，
“目标”：0，
},
{
“来源”：2，
“目标”：0，
},
]
}
var width=window.innerWidth
var height=window.innerHeight
var svg=d3.选择（“svg”）
.attr（“类”、“画布”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.call（d3.zoom（）.on（“zoom”），函数（事件）{
attr（“transform”，event.transform）
}))
.附加（“g”）
.style（“过滤器”、“url（#粘性）”）
//删除dblclick侦听器上的缩放
d3.选择（“svg”）。打开（“dblclick.zoom”，null）
var linkContainer=svg.append（“g”）.attr（“class”，“linkContainer”）
var nodeContainer=svg.append（“g”）.attr（“class”，“nodeContainer”）
var isSpliced=假；
var simulation=d3.forceSimulation（）
.force（“link”，d3.forceLink（）.id（函数（d）{
返回d.id；
}).距离（150））
.力（“电荷”，d3.力人体（）.力（-50））
.力（“中心”，d3.力中心（宽度/2，高度/2））
.力（“碰撞”，d3.力碰撞（）.半径（30））
//###############################################
//#########用于粘性效果的SVG滤波器#########
//###############################################
var defs=svg.append（“defs”）；
var filter=defs.append（“filter”）.attr（“id”，“goey”）；
filter.append（“feGaussianBlur”）
.attr（“in”，“SourceGraphic”）
.attr（“标准偏差”，“10”）
.attr（“结果”、“模糊”）；
filter.append（“feColorMatrix”）
.attr（“in”，“blur”）
.attr（“模式”、“矩阵”）
.attr（“值”，“1 1 1 1 1 0 0 50-5”）
.attr（“结果”、“粘性”）；
filter.append（“feComposite”）
.attr（“in”，“SourceGraphic”）
.attr（“in2”，“粘性”）
.attr（“操作员”、“顶部”）；
初始化（）
//###############################################
//##############初始化#################
//###############################################
函数初始化（）{
link=linkContainer。选择全部（“.link”）
.数据（图表.链接）
.加入（“行”）
.attr（“类”、“链接”）
节点=节点容器。选择全部（“.node”）
.data（graph.nodes，d=>d.id）
.加入（“g”）
.attr（“类”、“节点”）
.call（d3.drag（）
.on（“开始”，拖动开始）
.打开（“拖动”，拖动）
.开启（“结束”，绘图）
)
node.selectAll（“圆圈”）
.数据（d=>[d]）
.加入（“圈”）
.attr（“r”，30）
.样式（“填充”、“白色”）
node.selectAll（“文本”）
.数据（d=>[d]）
.join（“文本”）
.style（“类”、“图标”）
.attr（“字体系列”、“字体风格”）
.attr（“主要基线”、“中心”）
.attr（“文本锚定”、“中间”）
.attr（“字体大小”，30）
.attr（“填充”、“黑色”）
.attr（“笔划宽度”，“0px”）
.attr（“指针事件”、“无”）
.文本（（d）=>{
返回d.id
})
模拟
.nodes（图.nodes）
。在（勾选）上；
模拟
.force（“链接”）
.links（graph.links）
}
//###############################################
//#############更新职位################
//###############################################
函数勾选（）{
//更新链接位置
链接
.attr（“x1”，函数（d）{
返回d.source.x；
})
.attr（“y1”，函数（d）{
返回d.source.y；
})
.attr（“x2”，函数（d）{
返回d.target.x；
})
.attr（“y2”，功能（d）{
返回d.target.y；
});
//更新节点位置
节点
.attr（“转换”，函数（d）{
返回“translate”（“+d.x+”，“+d.y+”）；
});
    var svg = d3.select("svg")
        .attr("class", "canvas")
        .attr("width", width)
        .attr("height", height)
        .call(d3.zoom().on("zoom", function (event) {
            svg.attr("transform", event.transform)
        }))
        .append("g") 
        // <--------- remove the style here

    // remove zoom on dblclick listener
    d3.select("svg").on("dblclick.zoom", null)

    var linkContainer = svg.append("g").attr("class", "linkContainer")
    var nodeContainer = svg.append("g").attr("class", "nodeContainer")
        .style("filter", "url(#gooey)") // <---------- add the style here