javascript - 理解D3代码

我需要实现类似于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;
}

有人可以帮我理解吗？

最佳答案

从d3 docs：


  selection.attr（名称[，值]）
  
  ...如果值是一个函数，则将对每个函数求值
  选定元素（按顺序），正在传递当前数据d和
  当前索引i，其中this上下文为当前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