d3.js交互图表

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