D3.js 如何在D3中粘贴拖动的节点

我是D3（和javascript）新手。我在bl.ocks.org上尝试一个D3示例

我可以加载JSON数据，但当我拖动节点时，它会重新调整整个屏幕，但节点不会停止在我最初拖动的位置

有没有办法让节点停在我拖动它的地方

代码（从bl.ocks.org复制并粘贴）

.连接线{
冲程：#aaa；
}
.节点圆{
指针事件：全部；
中风：无；
笔划宽度：40px；
}
var svg=d3。选择（“svg”），
宽度=+svg.attr（“宽度”），
高度=+svg.attr（“高度”）；
var simulation=d3.forceSimulation（）
.force（“link”，d3.forceLink（）.id（函数（d）{return d.id；}））
.force（“电荷”，d3.forceManyBody（））
.力（“中心”，d3.力中心（宽度/2，高度/2））；
json（“miserables.json”），函数（错误，图形）{
如果（错误）抛出错误；
var link=svg.append（“g”）
.attr（“类”、“链接”）
.selectAll（“行”）
.数据（图表.链接）
.enter（）.append（“行”）；
var node=svg.append（“g”）
.attr（“类”、“节点”）
.selectAll（“圆圈”）
.数据（图.节点）
.enter（）.append（“圆”）
.attr（“r”，2.5）
.call（d3.drag（）
.on（“开始”，拖动开始）
.打开（“拖动”，拖动）
。在（“结束”，dragended））；
node.append（“标题”）
.text（函数（d）{返回d.id；}）；
模拟
.nodes（图.nodes）
。在（勾选）上；
模拟力（“链接”）
.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（“cx”，函数（d）{return d.x；}）
.attr（“cy”，函数（d）{返回d.y；}）；
}
});
函数dragstarted（d）{
如果（！d3.event.active）simulation.alphaTarget（0.3.restart（）；
d、 fx=d.x；
d、 fy=d.y；
}
函数（d）{
d、 fx=d3.event.x；
d、 fy=d3.event.y；
}
函数d（d）{
如果（！d3.event.active）simulation.alphaTarget（0）；
d、 fx=null；
d、 fy=null；
}

在原始bl.ock中，Bostock通过在

拖动的

功能中将

fx

和

fy

设置为

null

来重新调整拖动的节点：

function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}

这两个属性用于固定

x

和

y

位置。根据API：

在每个刻度结束时，在施加任何力后，具有定义的node.fx的节点将node.x重置为该值，node.vx设置为零；同样，定义了node.fy的节点将node.y重置为该值，并将node.vy设置为零。要取消固定以前固定的节点，请将node.fx和node.fy设置为

null

，或删除这些属性

解决方案：只需将其移除

function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
}

---

这是更新后的bl.ocks:

您好，请分享您的代码以便更好地理解

function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
}