理解D3代码

Question

我需要实现类似于 this 的内容，所以我试图理解这段代码。

有些事情我很难理解。例如，在下面的代码中，path.attr("d", linkArc);似乎在调用linkArc函数。但是，linkArc函数需要一个未传递的参数。它仍然设法获得一个名为d的对象。这是什么对象，它是如何通过的？ d中的path.attr表示什么？

// Use elliptical arc path segments to doubly-encode directionality.
function tick() {
    path.attr("d", linkArc); //<- this line
    circle.attr("transform", transform);
    text.attr("transform", transform);
}

function linkArc(d) {
  var dx = d.target.x - d.source.x,
      dy = d.target.y - d.source.y,
      dr = Math.sqrt(dx * dx + dy * dy);
  return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
}

有人可以帮我理解这个吗？

Answer 1

这就是.attr（）运算符的工作原理：

引用d3文档（https://github.com/mbostock/d3/wiki/Selections#attr）：

  

selection.attr（name [，value]）

     

如果指定了value，则将具有指定名称的属性设置为   所有选定元素的指定值。如果值是常数，   那么所有元素都被赋予相同的属性值;否则，如果   value是一个函数，然后为每个选定的函数计算函数   element（按顺序），传递当前数据d和当前数据   index i，将此上下文作为当前DOM元素。该   然后使用函数的返回值来设置每个元素的属性。   空值将删除指定的属性。

基本上它意味着你可以使用这样的功能：

function linkArc(d, i) {
  // 'd' is the datum
  // 'i' is the index
  // 'this' will be the current DOM element
}

Answer 2

来自d3 docs：

  

selection.attr（name [，value]）

     

...如果value是一个函数，则为每个函数计算函数   选中的元素（按顺序），传递当前数据d和   当前索引i，将此上下文作为当前DOM元素。该   函数的返回值然后用于设置每个元素的属性。   空值将删除指定的属性...

d来自的地方。它是当前设置的selection对象d（基准）。

如果您还将i添加到linkArc()函数，则可以很好地说明这一点：

function linkArc(d,i) {
    console.log('d: ' + d + ' || i: ' + i);
    var dx = d.target.x - d.source.x,
        dy = d.target.y - d.source.y,
        dr = Math.sqrt(dx * dx + dy * dy);
    return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
}

和Fiddle