javascript - 如何为使用 C3.js 创建的 SVG 元素设置 ID 属性？

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 时，我看到生成的 SVG 标签(本质上是条形图)没有 ID 属性。

想知道是否有任何方法可以设置和访问生成的 SVG 标签的 ID 属性。

提前致谢!

Answer 1

您可以使用c3.js oninit 回调 d3.js attr 功能:

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