d3如何选择数组进行迭代？

Question

我正在浏览这个基于力的布局示例。

http://bl.ocks.org/sathomas/774d02a21dc1c714def8 布局定义为

force = d3.layout.force()
    .size([width, height])
    .nodes(dataNodes)
    .links(dataLinks);

稍后在代码中虽然作者使用此调用遍历链接数组

force.linkStrength(function(link) {
    if (link.className === 'red')  return 0.1;
    return 1;
});

作者怎么知道function(link)会遍历链接数组而不是节点数组？

Answer 1

因为当你写这个时：

force = d3.layout.force()
    .size([width, height])
    .nodes(dataNodes)
    .links(dataLinks);

您正在执行所谓的 method chaining。众所周知，d3.js 经常使用它们，并且每个方法链接（至少使用此框架）returns 一个对象，具体取决于您调用的method。使用此特定代码，它会以这种方式运行：

1. 设置force对象和returnforce对象的大小
2. 设置force对象的nodes和return的nodes属性force
3. 设置nodes对象的links，和returnnodes的links属性

因此，您添加的每个方法链接都会返回不同的内容。在所有方法调用结束时，整个事情将被视为返回您上次调用的return值，并将其分配给=左侧的变量操作员。在这里，您的 force 变量。

就像你写的一样：

force = d3.layout.force()
force = force.size([width, height])
force = force.nodes(dataNodes)
force = force.links(dataLinks)

稍后，当您 iterate 遍历您的 force 变量时，您必须遍历 links 数组，因为这是您分配给 force 的内容。

提示 1：棘手的部分是，这里和一般在d3.js 中的每个方法都没有return 相同的对象。 d3.layout.force() 和 size() 返回实际的 force 对象，而 nodes() 返回 nodes 对象，links() 返回 links 对象。它是级联方法链接。链的每个元素都在前一个方法调用返回的对象上调用。

提示 2：您可以从中理解，将这个变量命名为 force 不一定最合适。

还有一个很酷的解释，其中包含更多细节from Scott Murray。