Comment définir l'attribut ID sur l'élément SVG créé à l'aide de C3.js?

Question

J'explore C3.js et l'utilise pour construire des graphiques de base. J'ai construit un graphique à barres simple basé sur le modèle qui a été fourni dans le site Web C3 et l'ai modifié pour afficher une couleur différente basée sur la valeur.

Voici le code 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 
    } 
} 
}); 

Le code fonctionne très bien et le graphique à barres est rendu comme prévu. Lorsque j'inspecte le code HTML, je vois une balise SVG (qui est essentiellement le graphique à barres) qui est générée sans attribut ID.

Vous vouliez savoir s'il existe un moyen de définir et d'accéder à l'attribut ID pour la balise SVG générée.

Merci d'avance!

Answer 1

Vous pouvez utiliser c3.js oninit rappel avec fonction d3.js attr:

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