d3js v5.9.2 如果对原生 JS 还有 Jq 比较熟悉的话，d3 的交互很快就能掌握 还是拿完整的柱形图例子修改：完整的柱图
selection.on()
d3 通过 selection.on() 对元素进行事件绑定或移除，用法很简单，例如：
selection.on(‘click’, function(){
console.log(this)
})
注意这里使用 function(){} 才有 this 指向对应元素 用法和原生 JS 及 jq 几乎一样
给柱状图进行事件绑定
这里我们使得鼠标悬浮的柱状图颜色变为 lightblue svg 中，元素属性的优先级为 0，为方便之前的 demo，这里添加 class 名来改变矩形的样式
.selected-rect{
fill: lightblue
}
js 代码如下
barContainer.append(‘rect’)
.attr(‘height’, d => barScale(d))
.attr(‘width’, barWidth – 1)
.on(‘mouseover’, function () {
d3.select(this) // 指向元素
.attr(‘class’, ‘selected-rect’); // 通过 class 改变样式
})
.on(‘mouseout’, function () {
d3.select(this)
.attr(‘class’, null);
});
总结
很简单吧，没啥好说的，主要是一开始不了解 svg 样式的优先级查阅了资料，没想到优先级权重是 0（翻译错了请指出 源代码
参考资料
交互式操作 Handling Events Presentation attributes