javascript - D3.js - Selection.call() 返回什么？

Question

我目前正在研究力模拟。 Here's the fiddle如果你需要的话。这个特定的部分给我带来了一些麻烦 - 我正在尝试链接而不是节点，其中情况相似，因此我们可以看到工作和非工作的区别:

function linkRender(selection) {
    selection
        .data(links)
        .enter().append("line")
        .attr("stroke-width",2)
        .attr("stroke","black")
}
let link = svg.selectAll("line").call(linkRender);

这里，call() 应该返回选择内容，即链接线。但是，当在 selection.on() 中渲染链接时，如果我使用 link 变量进行操作，它就无法正确渲染，这让我很苦恼:

simulation.on("tick",byFrame);
function byFrame() {
    // This doesn't work!
    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 )

    // But this works!
    svg.selectAll("circle")
        .attr("cx",d => d.x )
        .attr("cy",d => d.y )
}

如果我按照旧方法将 link 变量分配给 linkRender()，即

let link = linkRender(svg.selectAll("line"))

只要我设置linkRender()返回里面的代码(return Selection.data(links).etc)，渲染就可以正常工作。

最后，这是 link 和 svg.selectAll("line") 的比较:

所以我很想知道发生了什么事。提前致谢!

Answer 1

您的陈述并不等同，因此不具有可比性。 selection.call() 上的文档告诉我们:

Invokes the specified function exactly once, passing in this selection along with any optional arguments. Returns this selection.

这从字面上理解:返回这个选择意味着调用指定函数时所使用的选择。因为在该调用之前没有任何行，所以在调用 .call() 时，您的选择将为空。尽管您可以在该函数中成功使用此空选择来绑定(bind)数据并附加行，但这不会改变原始选择。

因为

Selections are immutable.

.call() 方法仍然会返回原始的(即空的)选择，然后将其分配给 link。很容易看出，当之后选择新添加的行或从修改后的函数返回输入选择时，这与其他解决方案不同。

它实际上适用于节点，因为在 byFrame() 中，您不通过 node 访问它们，而是通过执行 svg.selectAll("circle ”) 代替。

我认为这个应用程序使用

let link = linkRender(svg.selectAll("line"));

将是要走的路。正如您已经提到的，这将需要 linkRender() 正确返回选择。