Javascript D3力定向图问题：节点堆叠在坐标（0,0）处

我正在制作d3力有向图，它工作正常 （），直到我尝试为节点添加标签

据我所知，节点必须由“g”元素包装，但当我尝试时，所有节点都堆叠在左上角。我对JavaScript非常不熟悉，显然我遗漏了一些东西。如果有人能帮我改正错误，我将不胜感激。
我试着从一个类似的话题来解决这个问题：

var-dataURL=”https://raw.githubusercontent.com/Aeternia-ua/temp1/c50fa778c12c6d355fe08b54cb3f1ce24acfa4e9/graphtest.json";
var svg=d3。选择（“svg”），
宽度=+svg.attr（“宽度”），
高度=+svg.attr（“高度”）；
var color=d3.scaleOrdinal（d3.schemeCategory20c）；
var simulation=d3.forceSimulation（）
.force（“link”，d3.forceLink（）.id（函数（d）{
返回d.id；
}))
.力（“电荷”，d3.力人体（）.力（-150））
.力（“中心”，d3.力中心（宽度/2，高度/2））；
json（数据URL，函数（错误，图形）{
如果（错误）抛出错误；
模拟.节点（图.节点）；
模拟。力（“链接”）。链接（图。链接）；
var link=svg.append（“g”）
.attr（“类”、“链接”）
.selectAll（“行”）
.数据（图表.链接）
.enter（）.append（“行”）；
var node=svg.append（“g”）
.attr（“类”、“节点”）
.selectAll（“圆圈”）
.数据（图.节点）
.enter（）.append（“圆”）
//按组值设置节点半径。如果“组”键不存在，请将半径设置为8
.attr（“r”，函数（d）{
如果（d.hasOwnProperty（“集团”））{
返回d组*2；
}否则{
返回9；
}
})
//按“组”值列出的颜色
.样式（“填充”，功能（d）{
返色（d组）；
})
.call（d3.drag（）
.on（“开始”，拖动开始）
.打开（“拖动”，拖动）
。在（“结束”，dragended））；
node.append（“svg:title”）
.attr（“dx”，12）
.attr（“dy”，“.35em”）
.文本（功能（d）{
返回d.id
});
var labels=svg.append（“g”）
.attr（“类别”、“标签”）
.selectAll（“文本”）
.数据（图.节点）
.enter（）.append（“文本”）
.attr（“dx”，6）
.attr（“dy”，“.35em”）
.style（“字体大小”，10）
.文本（功能（d）{
返回d.id
});
模拟
.nodes（图.nodes）
。在（勾选）上；
模拟力（“链接”）
.links（图形链接）；
});
函数勾选（）{
link.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）{
返回d.x；
})
.attr（“cy”，函数（d）{
返回d.y；
});
标签
.attr（“x”，函数（d）{
返回d.x；
})
.attr（“y”，函数（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；
}

---

链接

，

节点

和

标签

是在

d3.json（）

调用中本地为匿名函数定义的，因此不能从

勾选（）

链接

，

节点

，

标签

是在

d3.json（）中本地为匿名函数定义的
ticked（）中的调用和so不可用
ticked（）
将函数
ticked（）
移动到
d3.json回调中：

d3.json(dataURL, function(error, graph) {
    //...
    function ticked(){
        //...
    };
};

另外，将链接的类别从
.links
更改为
.link
：

var link = svg.append("g")
    .attr("class", "link")

这是您更新的代码笔：
将函数
ticked（）
移动到
d3.json
回调中：

d3.json(dataURL, function(error, graph) {
    //...
    function ticked(){
        //...
    };
};

另外，将链接的类别从
.links
更改为
.link
：

var link = svg.append("g")
    .attr("class", "link")

这是您更新的代码笔：