如何將ID屬性設置為使用C3.js創建的SVG元素？

Question

我正在探索C3.js，並一直使用它來構建基本圖表。 我已經基於C3網站上提供的模板構建了一個簡單的條形圖，並對其進行了修改以根據該值顯示不同的顏色。

以下是JS代碼：

var chart = c3.generate({
data: {
    columns: [
        ['data1', 30, 20, 50, 40, 60, 50],
    ],
    type: 'bar',
    colors: {
        data1: '#0000ff'
    },
    color: function(color, d) {
        return d.value < 25 ? '#ff0000' : color
    }
}
});

代碼運行正常，條形圖按預期方式呈現。

在檢查HTML時，我看到沒有ID屬性的SVG標記（本質上是條形圖）。

想知道是否有任何方法可以設置和訪問所生成的SVG標簽的ID屬性。

提前致謝！

Answer 1

您可以將c3.js oninit回調與d3.js attr函數一起使用：

var chart = c3.generate({
    oninit: function() {
        this.svg.attr('id', 'your_id')
    },
    ...