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