d3.js交互图表

12次阅读

共计 668 个字符，预计需要花费 2 分钟才能阅读完成。

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);
});