Javascript D3定向图编辑器-v5到v6迁移问题

我在bl.ocks.org上找到了这个图，希望迁移到D3V6

我设法在没有任何语法错误的情况下运行，但是如果单击某个节点，结果似乎是错误的

我猜功能是：

function mousedown(event) {
        // because :active only works in WebKit?
        svg.classed('active', true);

        if (event.ctrlKey || mousedownNode || mousedownLink) return;

        // insert new node at point
        const point = d3.pointer(this);
        const node = { id: ++lastNodeId, reflexive: false, x: point[0], y: point[1] };
        nodes.push(node);

        restart();
    }

触发不想要的行为。当我将

d3.mouse（this）

更改为

d3.pointer（this）

时，原点节点开始不规则地跳舞

下面有没有关于修复我当前代码的提示

D3v6动态链路
svg{
背景色：#FFF；
游标：默认值；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
-o-用户选择：无；
用户选择：无；
}
svg:not（.active）：not（.ctrl）{
光标：十字线；
}
路径链接{
填充：无；
行程：#000；
笔画宽度：4px；
游标：默认值；
}
svg:not（.active）：not（.ctrl）path.link{
光标：指针；
}
path.link.selected{
笔划阵列：10，2；
}
拉铲{
指针事件：无；
}
path.link.hidden{
笔画宽度：0；
}
圆节点{
笔划宽度：1.5px；
光标：指针；
}
圆。节点。自反{
笔划：#000！重要；
笔划宽度：2.5px；
}
正文{
字体：12px无衬线；
指针事件：无；
}
text.id{
文本锚定：中间；
字体大小：粗体；
}
//为D3设置SVG
常量宽度=window.innerWidth
const height=window.innerHeight
常量颜色=d3.scaleOrdinal（d3.SchemeCategory 10）；
const svg=d3.select（'body'）
.append（'svg'）
.on（'contextmenu'，（event）=>{event.preventDefault（）；}）
.attr（'width'，width）
.attr（'高度'），高度；
//设置初始节点和链接
//-节点是通过“id”而不是通过数组中的索引来知道的。
//-节点上指示自反边（作为粗体黑圈）。
//-链接总是源<目标；边缘方向由“左”和“右”设置。
常量节点=[
{id:0，自反：false}，
{id:1，反身：true}，
{id:2，反身：false}
];
设lastNodeId=2；
常量链接=[
{源：节点[0]，目标：节点[1]，左：假，右：真}，
{源：节点[1]，目标：节点[2]，左：假，右：真}
];
//初始D3部队布局
const force=d3.forceSimulation（）
.force（'link'，d3.forceLink（）.id（（d）=>d.id）.距离（150））
.force（'电荷'，d3.forceManyBody（）.强度（-500））
.力（'x'，d3.力x（宽度/2））
.力（'y'，d3.力（高度/2））
.在（'tick'，tick'）；
//初始D3拖动支持
常数拖动=d3.drag（）
//Mac Firefox在按住Ctrl键时不区分左键和右键。。。
.filter（（event）=>event.button==0 | | event.button==2）
.on（'开始'，（事件，d）=>{
如果（！event.active）强制.alphaTarget（0.3）.restart（）；
d、 fx=d.x；
d、 fy=d.y；
})
.on（'拖动'，（事件，d）=>{
d、 fx=事件x；
d、 fy=事件y；
})
.on（'结束'，（事件，d）=>{
如果（！event.active）force.alphaTarget（0）；
d、 fx=null；
d、 fy=null；
});
//为图形链接定义箭头标记
append（'svg:defs'）.append（'svg:marker'））
.attr（'id'，'end arrow'）
.attr（'viewBox'，'0-5100'）
.attr（'refX'，6）
.attr（'markerWidth'，3）
.attr（'markerHeight'，3）
.attr（'orient'、'auto'）
.append（'svg:path'）
.attr（'d'，'M0，-5L10,0L0,5'）
.attr（'fill'，'#000'）；
append（'svg:defs'）.append（'svg:marker'））
.attr（'id'，'start arrow'）
.attr（'viewBox'，'0-5100'）
.attr（'refX'，4）
.attr（'markerWidth'，3）
.attr（'markerHeight'，3）
.attr（'orient'、'auto'）
.append（'svg:path'）
.attr（'d'，'M10，-5L0,0L10,5'）
.attr（'fill'，'#000'）；
//拖动新节点时显示的行
常量dragLine=svg.append（'svg:path'）
.attr（'class'，'link dragline hidden'）
.attr（'d'，'M0,0L0,0'）；
//链接和节点元素组的句柄
让path=svg.append（'svg:g'）。选择all（'path'）；
让circle=svg.append（'svg:g'）。选择all（'g'）；
//鼠标事件变量
让selectedNode=null；
让selectedLink=null；
让mousedownLink=null；
让mousedownNode=null；
让mouseupNode=null；
函数resetMouseVars（）{
mousedownNode=null；
mouseupNode=null；
mousedownLink=null；
}
//更新力布局（每次迭代自动调用）
函数tick（）{
//从节点中心使用适当的填充绘制定向边
path.attr（'d'，（d）=>{
const deltaX=d.target.x-d.source.x；
常量deltaY=d.target.y-d.source.y；
const dist=Math.sqrt（deltaX*deltaX+deltaY*deltaY）；
常量normX=deltaX/dist；
常模=三角洲/地区；
const sourcePadding=d.left？17:12；
const targetPadding=d.right？17:12；
const sourceX=d.source.x+（sourcePadding*normX）；
const sourceY=d.source.y+（sourcePadding*normY）；
常量targetX=d.target.x-（targetPadding*normX）；
const targetY=d.target.y-（targetPadding*normY）；
返回'M${s
dragLine.attr('d', `M${mousedownNode.x},${mousedownNode.y}L${event.x},${event.y}`);

const p = d3.pointer(event);
dragLine.attr('d', `M${mousedownNode.x},${mousedownNode.y}L${p.x},${p.y}`);