Bootstrap

d3.js学习笔记vue2(4)匿名函数

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被重新定义,也可以通过这种方法来选取事件发生的元素

;