如何将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')
    },
    ...