4

我正在学习 Javascript，对以下用法有点困惑。这些问题可能比 d3 更具体。

http://mbostock.github.com/d3/ex/sunburst.html

var arc = d3.svg.arc()
.startAngle(function(d) { return d.x; })
.endAngle(function(d) { return d.x + d.dx; })
.innerRadius(function(d) { return Math.sqrt(d.y); })
.outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });

所以，

  1. startAngle、endAngle 等将函数作为参数。将参数作为函数而不仅仅是数字的理由是什么？
  2. 在完整的代码中，没有定义“d”。我在几乎所有的 d3 程序中都看到了它。“d”是干什么用的？它是如何设置的或在哪里通过的？

谢谢。

4

4 回答 4

5

对于你的第一个问题：

该d3.svg.arc对象用于在饼图中创建切片。这些切片中的每一个都需要不同的开始和结束角度才能正确显示。

在d3.js您不传递每个切片的两个角度，而是提供一个函数，该函数接受一个参数d，该参数是该切片的相应数据元素并返回角度。此处设置的其他参数也是如此。

另一个优点是，一个数据可以包含多个属性，您可以决定哪个属性在可视化中占哪个部分。

你的第二个问题

当使用一个函数作为另一个函数的参数时，通常使用给定形式的函数表达式。在d3.js大多数用作参数的函数中，它们本身会传入一个或两个参数（大多数情况下是需要转换的数据部分）。在您的函数表达式中，您需要（或至少应该）命名这些参数以解决它们。示例中的大部分时间d都用作保存特定数据项的参数的参数名。

它不需要在其他地方定义，因为它只是一个普通的函数参数。如果你愿意，你可以用以下方式重写它：

function startAngleParam( d ) {
 return d.x;
}

var arc = d3.svg.arc()
.startAngle( startAngleParam )
...
于 2012-06-04T13:15:11.587 回答
1

d非常清楚地作为参数传递给匿名函数。大概这些函数可以将数字作为参数，或者一个用于更复杂操作的函数（有点像如何String.replace()获取替换字符串，或者通过它运行结果数组并返回替换值的函数）

于 2012-06-04T13:07:38.440 回答
1

1：这是一个回调函数。当您将其作为参数发送时，该函数不会被调用，而是会保留该函数并可以稍后调用，并且可以在需要时一遍又一遍地调用它。

2：参数d只是一个发送到回调函数的值，函数使用它来产生结果。标识符名称d仅在回调函数中定义，每当使用该函数时，该值都会像往常一样发送到函数中。

发送到回调函数的值是一个包含圆弧坐标的对象。当圆弧坐标发生变化时，会调用回调函数来计算绘制圆弧所需的其他值。

于 2012-06-04T13:11:47.540 回答
1

我还不能发表评论，但想补充一下 Sirko 的出色回答。他指出：

在 d3.js 中，您不会为每个切片传入两个角度，而是提供一个函数，该函数接受一个参数d，该参数是该切片的相应数据元素并返回角度。

我要补充一点，您可能还会遇到表单的回调function(d, i) { ... }。当您看到这一点时，d指的是元素的数据并i指代其索引 - 按照惯例使用单字母缩写，但您可以随意调用参数。

当您遍历数据时，访问这两个项目会很有帮助。例如，在本教程中，数据和索引都用于构建条形图： http: //mbostock.github.com/d3/tutorial/bar-1.html

于 2012-06-22T15:10:23.930 回答