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

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

提前致谢！

Answer 1

您可以使用c3.js oninit callback with d3.js attr函数：

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

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

How do I set the ID attribute to the SVG element created using C3.js?

html

javascript

jquery

svg

c3.js