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。使用此特定代码，它以这种方式起作用：

设置force对象和return force对象的大小
设置nodes对象的force和return nodes force属性links
设置nodes对象的return和links nodes return属性=

因此，您添加的每个链接方法都会返回不同的内容。在所有方法调用结束时，整个事件将被视为返回最后一次调用的force值，并将其分配给{左侧的变量{1}}运算符。在这里，您的force = d3.layout.force() force = force.size([width, height]) force = force.nodes(dataNodes) force = force.links(dataLinks)变量。

就像你写的那样：

iterate

稍后，当您force对links变量force时，您必须遍历d3.js数组，因为这是您分配给return的内容

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

提示2：您可以从中理解，它不一定最适合命名此变量{{1}}。

还有一个很酷的解释，进一步详细说明 from Scott Murray 。

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

1 个答案: