d3为了灵活,在很多地方需要使用匿名函数,比如设定属性时
curvesClass.node.selectAll('path')
.data(points)
.enter()
.append('path')
.attr('d', (d) => curvesClass.lineGenerator(d)) // 匿名函数
.attr('stroke', curvesColor) // 变量
或者对事件做处理
this.zoomHandler = d3.zoom()
.scaleExtent([0.1, 10]) // zoom limit
.translateExtent([[-100, -100], [this.width + 90, this.height + 100]])
.on('zoom', () => {
this.svgGraphContainer.attr('transform', d3.event.transform)
this.axises.xContainer.call(this.axises.x.scale(d3.event.transform.rescaleX(this.axises.xScale)))
this.axises.yContainer.call(this.axises.y.scale(d3.event.transform.rescaleY(this.axises.yScale)))
})
如果在vue中使用,因为在vue组件里,this指向上下文组件,所以如果这个匿名函数中使用到了this,最好使用ES6的箭头函数,而不是传统的匿名函数。当然其实也可以使用命名的函数,只要该函数满足格式要求。
这类匿名函数支持3个形参,并要求一个返回值。根据
d3.js - Third variable in D3 anonymous function - Stack Overflow
这3个形参按照顺序分别代表着
d=q[i] // 每个元素对应的数据
i // 数据的索引
q // 数据的父节点
比如如果输入数据是一个三维数组,其中第一维代表线条,第二维代表点,第三维代表点的x、y坐标值,那么
d=q[i]
i
q=[[[x00, y00], [x01, y01], [x02, y02]], [[x10, y=10], [x11, y11], [x12, y12]]]
所以函数的格式就是
(d, i, q) => {
// some code to calculate
return d
}
在事件处理中,这很重要。因为d3中对事件实际作用的元素可以通过下面方式选取,然后进行操作
d3.select(this)
这种用法十分重要,因为很多事件都要对事件发生的目标元素进行处理。
vue对this有特殊定义,所以这种方法不能用了。可选的方法是:直接用匿名函数的第2个和第3个元素来选取
d3.select(q[i]) // d3.select(this)
即使this被重新定义,也可以通过这种方法来选取事件发生的元素