我正在学习Javascript,并且对以下用法感到困惑。这些问题可能比java特定的javaScript更多。
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); });
所以,
感谢。
答案 0 :(得分:4)
第一个问题:
d3.svg.arc
对象用于在饼图内创建切片。这些切片中的每一个都需要不同的开始和结束角度才能正确显示。
在d3.js
中,您不会为每个切片传递两个角度,而是提供一个函数,该函数接受一个参数d
,该参数是该切片的相应数据元素并返回角度。这同样适用于此处设置的其他参数。
另一个优点是,一个数据可以包含多个属性,您可以决定哪个属性可以获取与可视化相关的部分。
您的第二个问题
当使用函数作为另一个函数的参数时,通常使用给定形式的函数表达式。在d3.js
中,作为参数的大多数函数本身都会传递一个或两个参数(大部分时间是需要转换的数据部分)。在函数表达式中,您需要(或至少应该)命名这些参数以便解决它们。示例d
中的大多数时间用作保存特定数据项的参数的参数名称。
它不需要在别处定义,因为它只是一个正常的函数参数。如果您愿意,可以通过以下方式重写它:
function startAngleParam( d ) {
return d.x;
}
var arc = d3.svg.arc()
.startAngle( startAngleParam )
...
答案 1 :(得分:1)
d
非常明确地作为匿名函数的参数传递。据推测,这些函数可以将数字作为参数,或者用于更复杂操作的函数(类似String.replace()
如何取代替换字符串,或者运行结果数组的函数和返回替换值)
答案 2 :(得分:1)
1:这是一个回调函数。当您将该函数作为参数发送时,不会调用该函数,而是保留该函数并在以后调用,并且可以在需要时反复调用它。
2:参数d
只是发送到回调函数的值,函数用它来产生结果。标识符名d
仅在回调函数中定义,每当使用该函数时,该值就像往常一样发送到函数中。
发送到回调函数的值是一个包含弧坐标的对象。当弧的坐标改变时,调用回调函数来计算绘制弧所需的其他值。
答案 3 :(得分:1)
我还不能发表评论,但想加入Sirko的优秀答案。他指出:
在d3.js中,您不会为每个切片传递两个角度,而是提供一个函数,该函数接受一个参数d
,该参数是该切片的相应数据元素并返回角度。
我想补充一点,您可能还会遇到function(d, i) { ... }
形式的回调。当您看到这一点时,d
引用元素的数据,i
引用其索引 - 单字母缩写按惯例使用,但您可以随意调用参数。
在遍历数据时,有权访问这两个项目会很有帮助。例如,在本教程中,数据和索引都用于构建条形图:http://mbostock.github.com/d3/tutorial/bar-1.html