关于箭头函数在d3.select(this)时的问题

[ckinmind]

在lesson 10: 交互式操作中要给矩形绑定一个事件，部分代码如下

let rects = svg.selectAll(".MyRect")
          .data(dataset)
          .enter()
          .append("rect")
          .attr("class","MyRect")
          .attr("transform",`translate(${padding.left}, ${padding.top})`)
          .attr("x", (d,i) => xScale(i) + rectPadding/2)
          .attr("y", d => yScale(d))
          .attr("width", xScale.rangeBand() - rectPadding)
          .attr("height", (d) => height - padding.top - padding.bottom - yScale(d))
          .attr("fill","steelblue")		//填充颜色不要写在CSS里
          .on("mouseover",function(d,i){      // 将此处改为箭头函数，会报错，提示找不到setAttribute方法
              d3.select(this).attr("fill","yellow");
          })
          .on("mouseout",function(d,i){
              d3.select(this)
                .transition()
                .duration(500)
                .attr("fill","steelblue");
          });

将上面的

.on("mouseover",function(d,i){     
        d3.select(this).attr("fill","yellow");
})

改为箭头函数的形式

.on("mouseover",(d,i) => {     
        d3.select(this).attr("fill","yellow");
})

结果报错，错误为this.setAttribute is not a function，估计错误和this指针有关

[ckinmind]

d3 issue #2644: How to use the d3.selectAll(...).each() method with ES6 arrow notation

ES6 arrow functions lexically bind this, which prevents you from being able to access the this context of the selected node set by D3. There’s no way to fix this globally without abandoning the use of this as the selected node; some potential approaches are discussed in #2246

以上是作者的回答

d3 issue #2246

这个是15年的回答，可能过时的，再找别的issue

[ckinmind]

stackoverflow: Using arrow functions with d3

提到d3.v4版本的回调函数有三个参数指向当前的dom节点

[ckinmind]

stackoverflow: D3.js v4: Access current DOM element in ES6 arrow function event listener

提到一种有用的方法可以使用箭头函数

d3.select("div").on('mouseenter', () => {
  d3.select(d3.event.target).text("Yay, this works!");
});

[ckinmind]

总结：四种解决方案

1. 不使用箭头函数，就可以使用d3.select(this)

2. 使用d3.event.target

3. 这样用d3.select(rect:nth-child(${i}))根据索引找到元素

4. v4版本的事件回调中提供第三个参数，指向当前的节点

[woshierha]

而且在一开始指定颜色如果用了箭头函数，后面再去通过点击或者移动事件修改的话也会改不了颜色，用箭头函数可能还有很多隐藏的bug