d3.js学习笔记vue2（4）匿名函数_vue匿名函数-优快云博客

本文链接：https://blog.youkuaiyun.com/silent_missile/article/details/84841109

本文探讨了D3.js中匿名函数的使用，特别是在属性设定和事件处理中的角色，以及在Vue环境中如何正确处理this指向问题，确保匿名函数有效运行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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