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