Javascript D3V6在单击时添加节点

我正在尝试与D3v6取得联系。我以前使用D3v4的函数现在似乎已经过时，或者需要不同的构造函数。无论如何，我试图在一个简单的点击事件中添加一个节点<代码>添加节点（）

ID由数组的长度+1生成，我进一步将元素推送到数组中，并创建/合并新节点。之后，重新启动模拟并加热alpha。仍然不知道为什么我会得到如图所示的结果。这就像节点冻结，而链接正在移动

D3v6 v.0.0.1
圈{
填充：白烟；
笔画：白色；
笔画宽度：2px
}
线{
笔画：黑色；
}
svg{
背景色：rgb（220、220、220）；
}
变量宽度=window.innerWidth，高度=window.innerHeight
变量图={
“节点”：[
{“id”：1}，
{“id”：2}，
{“id”：3}，
{“id”：4}，
{“id”：5}
],
“链接”：[
{“源”：1，“目标”：2}，
{“源”：2，“目标”：3}，
{“源”：3，“目标”：4}，
{“源”：4，“目标”：5}，
{“源”：5，“目标”：1}
]
}
var svg=d3.选择（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.call（d3.zoom（）.on（“zoom”），函数（事件）{
attr（“transform”，event.transform）
}))
.附加（“g”）
var simulation=d3.forceSimulation（）
.force（“link”，d3.forceLink（）.id（函数（d）{return d.id；}）.distance（100））
.force（'电荷'，d3.forceManyBody（）.强度（-400））
.力（'中心'，d3.力中心（宽度/2，高度/2））
var link=svg.selectAll（“.link”）
.数据（图表.链接）
.输入（）
.附加（“行”）
var node=svg.selectAll（“.nodes”）
.数据（图.节点）
.输入（）
.附加（“圆圈”）
.attr（“r”，20）
.on（“单击”，添加节点）
.call（d3.drag（）
.on（“开始”，拖动开始）
.打开（“拖动”，拖动）
.开启（“结束”，绘图）
)
模拟
.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（“transform”，函数（d）{return“translate”（“+d.x+”，“+d.y+”）”）；}）；
}
函数dragStarted（事件，d）{
如果（！event.active）simulation.alphaTarget（0.3）.restart（）；
d、 fx=d.x；
d、 fy=d.y；
}
函数（事件，d）{
d、 fx=事件x；
d、 fy=事件y；
}
函数Draged（事件，d）{
如果（！event.active）simulation.alphaTarget（0）；
d、 fx=未定义；
d、 fy=未定义；
}
函数addNode（d）{
var newID=graph.nodes.length+1
graph.nodes.push（{“id”：newID}）
node=svg。选择所有（“.nodes”）
.附加（“圆圈”）
.attr（“r”，20）
.merge（节点）
模拟.节点（图.节点）；
模拟。力（“链接”）。链接（图。链接）；
//重新进行模拟
simulation.alpha（0.3）.restart（）
}

您没有正确输入项目-您没有enter语句。您也没有任何带有class

节点的元素，因此您的初始选择为空，您希望选择
圆圈
s（或对其应用一个类）。尝试：

节点未绑定，因此它们将浮动。此外，拖动是长时间单击，因此如果不按原样创建新节点，则无法拖动节点



D3v6 v.0.0.1
圈{
填充：白烟；
笔画：白色；
笔画宽度：2px
}
线{
笔画：黑色；
}
svg{
背景色：rgb（220、220、220）；
}
变量宽度=window.innerWidth，高度=window.innerHeight
变量图={
“节点”：[
{“id”：1}，
{“id”：2}，
{“id”：3}，
{“id”：4}，
{“id”：5}
],
“链接”：[
{“源”：1，“目标”：2}，
{“源”：2，“目标”：3}，
{“源”：3，“目标”：4}，
{“源”：4，“目标”：5}，
{“源”：5，“目标”：1}
]
}
var svg=d3.选择（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.call（d3.zoom（）.on（“zoom”），函数（事件）{
attr（“transform”，event.transform）
}))
.附加（“g”）
var simulation=d3.forceSimulation（）
.force（“link”，d3.forceLink（）.id（函数（d）{return d.id；}）.distance（100））
.force（'电荷'，d3.forceManyBody（）.强度（-400））
.力（'中心'，d3.力中心（宽度/2，高度/2））
var link=svg.selectAll（“.link”）
.数据（图表.链接）
.输入（）
.附加（“行”）
var node=svg.selectAll（“.nodes”）
.数据（图.节点）
.输入（）
.附加（“圆圈”）
.attr（“r”，20）
.on（“单击”，添加节点）
.call（d3.drag（）
.on（“开始”，拖动开始）
.打开（“拖动”，拖动）
.开启（“结束”，绘图）
)
模拟
.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（“transform”，函数（d）{return“translate”（“+d.x+”，“+d.y+”）”）；}）；
}
函数dragStarted（事件，d）{
如果（！event.active）simulation.alphaTarget（0.3）.restart（）；
d、 fx=d.x；
d、 fy=d.y；
}
函数（事件，d）{
d、 fx=事件x；
d、 fy=事件y；
}
函数Draged（事件，d）{
如果（！event.active）simulation.alphaT
    node = svg.selectAll("circle")
        .data(graph.nodes)
        .enter()
        .append("circle")
        .attr("r", 20)
        .merge(node)