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