d3.select(this)在mouseover中直接可用，调用外部函数时失效求助

嘿，我完全懂你刚接触D3时遇到的这个this指向坑！其实问题出在函数调用时this的绑定规则上，咱们一步步理清楚：

为什么直接调用changeFont会失效？ #

当你在mousemove的回调函数里直接写d3.select(this)时，D3会自动把this绑定到触发事件的DOM元素上——这是D3事件回调的默认行为。但如果你把逻辑抽到独立的changeFont函数里直接调用，普通函数调用的this就不再指向那个DOM元素了（浏览器环境里默认指向window对象），所以d3.select(this)自然找不到你想要操作的元素。

三种解决方法，按需选： #

方法一：用call()手动绑定this

在调用changeFont时，用call()把当前回调里的this传进去，强制让函数内部的this指向正确的DOM元素：

function changeFont() {
  d3.select(this)
    .attr('font-size', '2em')
}

// 在mousemove回调里这样调用
.on('mousemove', function() {
  var mouse = d3.mouse(this);
  var xVal = mouse[0];
  // 用call绑定this
  changeFont.call(this);
})

这种方式保留了你原本的函数结构，只是加了一步绑定操作。

方法二：给函数传DOM元素参数

如果你不想纠结this的指向，直接把目标元素作为参数传给changeFont会更直观：

// 修改函数，接收元素参数
function changeFont(targetElement) {
  d3.select(targetElement)
    .attr('font-size', '2em')
}

// 在回调里传入当前元素
.on('mousemove', function() {
  var mouse = d3.mouse(this);
  var xVal = mouse[0];
  changeFont(this);
})

这种写法完全避开了this的绑定问题，新手友好度拉满。

方法三：利用箭头函数（限特定场景）

如果你的项目支持ES6+，可以把changeFont定义成事件回调的内部箭头函数——箭头函数的this会继承外层作用域的this，也就是D3绑定的DOM元素：

.on('mousemove', function() {
  var mouse = d3.mouse(this);
  var xVal = mouse[0];
  
  // 内部箭头函数，this自动继承外层回调的this
  const changeFont = () => {
    d3.select(this)
      .attr('font-size', '2em')
  }
  
  changeFont();
})

不过这种方式适合逻辑只在当前回调里复用的场景，灵活性不如前两种。

额外提示（针对D3 v6+） #

如果你用的是D3新版本（v6及以上），事件回调的写法有更新，this不再默认绑定元素，而是通过event.currentTarget获取目标元素：

.on('mousemove', (event) => {
  var mouse = d3.pointer(event); // 代替旧版的d3.mouse
  var xVal = mouse[0];
  // 这里用event.currentTarget代替this
  changeFont.call(event.currentTarget);
})

内容的提问来源于stack exchange，提问作者Canovice