Javascript D3 v4：节点位置设置为NaN

这可能是有史以来最简单的D3部队布局：

const svg = main.append("svg")
    .attr("width",500)
    .attr("height",500)
    .classed("SVG_frame",true)
    .append("g")

const nodes = [{id:1},{id:2}];

const simulation = d3.forceSimulation(nodes)
    .force("centering",d3.forceCenter([200,200]))
    .force("collision",d3.forceCollide(20))

const node = svg
    .selectAll("circle")
    .data(nodes)
    .enter().append("circle")
    .attr("r",20)

simulation.on("tick",function() {
    console.log(nodes[0].x)
    node
        .attr("cx",d => d.x)
        .attr("cy",d => d.y)
})

然而，我在第一帧得到属性cx:Expected length，“NaN”。。（

cy

在模拟放弃移动的帧上移动一点点）

我知道这已经被问过好几次了，但似乎没有一次提到版本4，在版本4中，力模拟可能已经改变了它的内部工作。事实上，文档甚至指出，当位置为NaN时，可能这不应该发生，但确实发生了

---

有人有任何线索吗？

这里的问题很简单：取两个值，而不是一个值数组：

[d3.力中心]使用指定的x和y坐标创建新的定心力。如果未指定x和y，则默认为⟨0,0⟩.

在API中，参数周围的括号表示该参数是可选的（）。当您在D3 API中看到类似的内容时：

d3.力中心（[x，y]）

您必须注意不要将这些括号误认为是数组。这里，

[x，y]

意味着这些值是可选的，但并不意味着它们必须在一个数组中

因此，不是：

.force("centering",d3.forceCenter([200,200]))

应该是：

.force("centering",d3.forceCenter(200,200))

下面是一个演示：

const svg=d3.select（“body”）.append（“svg”）
.attr（“宽度”，500）
.attr（“高度”，500）
.classed（“SVG_框架”，真）
.附加（“g”）
常量节点=[{id:1}，{id:2}]；
常量模拟=d3.forceSimulation（节点）
.力（“定心”，d3.力中心（200200））
.力（“碰撞”，d3.力碰撞（20））
const node=svg
.selectAll（“圆圈”）
.数据（节点）
.enter（）.append（“圆”）
.attr（“r”，20）；
simulation.on（“tick”，function（））{
node.attr（“cx”，d=>d.x）.attr（“cy”，d=>d.y）
});
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa！成功了！我永远不知道这些括号是数组还是doc符号。我这次选择前者。：/我想我会假设它们永远都不是数组，除非另有说明。