D3.js - 什么是selection.call（）返回？ [英] D3.js - what is selection.call() returning?

问题描述

我目前正在进行力模拟。如果您需要，

d爱知道发生了什么。提前感谢！

解决方案

您的陈述不等效，因此不具可比性。有关 selection.call（） 告诉我们：

调用指定的函数一次，传递这个选择以及任何可选的参数。返回此选择。

这是从字面上理解的：返回此选择意味着精确的选择指定的函数被调用。因为在调用之前没有行，当调用 .call（）时，您的选择将为空。虽然您可以成功地使用该函数中的此空选择来绑定数据并追加行，但这不会更改原始选择。

因为

选择是不可变的。

.call（）方法将返回原始（即空）选择，到链接。很容易看到，这与您之后选择新添加的行时或者从修改后的函数返回输入选择时的其他解决方案不同。

实际工作对于节点，因为在 byFrame（）你不通过节点访问它们，而是通过执行 svg.selectAll（circle）。

我想这个应用程序使用

  let link = linkRender（svg.selectAll（line））; 
  

将是要走的路。正如您已经提到的，这将需要 linkRender（）才能正确返回选择。

I'm currently working on a force simulation. Here's the fiddle if you need it. This particular section is giving me a bit of trouble - I'm trying it for links and not nodes, where the situation is similar, so we can see the difference of working and non-working:

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

Here, call() is supposed to return the selection, that is, the link lines. However, when rendering links in selection.on(), if I use the link variable to work with, it doesn't render properly, much to my distress:

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 )
}

And if I assign the link variable to linkRender() the old way, that is,

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

as long as I set linkRender() to return the code inside (return selection.data(links).etc), the rendering works fine.

Finally, here's a comparison of link and svg.selectAll("line"):

So I'd love to know what is going on. Thanks in advance!

解决方案

Your statements are not equivalent and are, therefore, not comparable. The documentation on selection.call() tells us:

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

This is to be understood literally: returning this selection means exactly the selection the specified function is called with. Because there are no lines prior to that call your selection will be empty when invoking .call() on it. Although you may successfully use this empty selection within that function to bind data and append the lines, this will not alter the original selection.

Because

Selections are immutable.

the .call() method will nonetheless return the original, i.e. empty, selection, which will then be assigned to link. It is easy to see, that this differs from your other solution when selecting the newly added lines afterwards or when returning the enter selection from your modified function.

It is actually working for the nodes, because in byFrame() you do not access them via node but by doing a svg.selectAll("circle") instead.

I think for this application using

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

will be the way to go. As you have already mentioned, this will require linkRender() to return the selection properly.

这篇关于D3.js - 什么是selection.call（）返回？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！