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

【问题标题】：How do I set the ID attribute to the SVG element created using C3.js?如何将 ID 属性设置为使用 C3.js 创建的 SVG 元素？
【发布时间】：2017-10-10 18:00:27
【问题描述】：

我正在探索 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 属性。

提前致谢！

【问题讨论】：

标签： javascript jquery html svg c3.js

【解决方案1】：

您可以将 c3.js oninit 回调与 d3.js attr 函数一起使用：

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

【讨论】：