D3.js D3双击重置粘性节点

我想在双击画布粘滞节点时将其重置为原始位置。我正在向添加以下代码，但它不起作用：

function dblclick() {
  graph.nodes.forEach(function(d) {
    d.fx = d.fy = null;
 })
};

将

dblclick

添加到节点：

simulation
  .nodes(graph.nodes)
  .on("tick", ticked)
  .on("dblclick", dblclick);

在下面的示例中，当双击节点时，它将重置为其原始位置，但是，此示例在SVG中

---

这里是一个修改版本，双击该版本可释放粘性节点：

var canvas=document.querySelector（“canvas”），
context=canvas.getContext（“2d”），
宽度=画布宽度，
高度=画布高度；
var simulation=d3.forceSimulation（）
.force（“link”，d3.forceLink（）.id（函数（d）{return d.id；}））
.force（“电荷”，d3.forceManyBody（））
.力（“中心”，d3.力中心（宽度/2，高度/2））；
d3.json（“https://gist.githubusercontent.com/mbostock/4062045/raw/5916d145c8c048a6e3086915a6be464467391c62/miserables.json，函数（错误，图形）{
如果（错误）抛出错误；
模拟
.nodes（图.nodes）
。在（勾选）上；
模拟力（“链接”）
.links（图形链接）；
d3.选择（画布）
.call（d3.drag（）
.容器（帆布）
.主题（dragsubject）
.on（“开始”，拖动开始）
.打开（“拖动”，拖动）
。在（“结束”，dragended））；
函数勾选（）{
var保证金=20；
forEach（函数（d）{
d、 x=数学最大值（边距，数学最小值（宽度-边距，d.x））
d、 y=数学最大值（边距，数学最小值（高度-边距，d.y））
})
clearRect（0，0，宽度，高度）；
context.beginPath（）；
图.links.forEach（drawLink）；
context.strokeStyle=“#aaa”；
stroke（）；
context.beginPath（）；
graph.nodes.forEach（drawNode）；
context.fill（）；
context.strokeStyle=“#fff”；
stroke（）；
}
函数dragsubject（）{
返回模拟.find（d3.event.x，d3.event.y）；
}
});
var clickDate=新日期（）；
var差分；
函数dragstarted（）{
如果（！d3.event.active）simulation.alphaTarget（0.3.restart（）；
d3.event.subject.fx=Math.max（10，Math.min（宽度-10，d3.event.subject.x））；
d3.event.subject.fy=Math.max（10，Math.min（高度-10，d3.event.subject.y））；
}
函数（）{
d3.event.subject.fx=Math.max（10，Math.min（宽度-10，d3.event.x））；
d3.event.subject.fy=Math.max（10，Math.min（高度-10，d3.event.y））；
}
函数dragended（）{
如果（！d3.event.active）simulation.alphaTarget（0）；
差异_ms=（新日期（））.getTime（）-单击日期.getTime（）；
单击日期=新日期（）；
如果（差值小于200）{
simulation.alphaTarget（0.3）.restart（）
d3.event.subject.fx=null；
d3.event.subject.fy=null；
}
}
功能拉杆（d）{
context.moveTo（d.source.x，d.source.y）；
lineTo（d.target.x，d.target.y）；
}
功能节点（d）{
上下文。移动到（d.x+3，d.y）；
弧（d.x，d.y，3，0，2*Math.PI）；
}