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を調べると、ID属性なしで生成されたSVGタグ（本質的に棒グラフです）が表示されます。

生成されたSVGタグのID属性を設定してアクセスする方法があるかどうかを知りたがっていました。

ありがとうございます！

Answer 1

あなたはd3.js attr機能をc3.js oninitコールバックを使用することができます。

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