D3 sélection d'un élément dans un SVG
J'essaie de créer des graphiques dans D3. Jusqu'à présent l'amour, mais je suis un peu coincé. Je veux créer une zone pour tenir les points de données et un autre pour l'axe et les étiquettes. Je pense que je vais aller encore plus fin que cela pour rendre la mise à jour du graphique plus efficace. Mais le problème que j'ai est que je n'arrive pas à sélectionner des sous-éléments dans le SVG.
Voici ce que j'ai:
var graph = d3.select('#Graph svg')
if (graph[0][0] == null){
graph = d3.select('#Graph')
.append("svg:svg")
.attr("width",width)
.attr("height",height)
.attr("class","chart");
}
graph.append("svg:g")
.attr("id","data")
Maintenant, je n'ai pas trouvé un moyen de sélectionner ce conteneur de données. J'ai essayé
d3.select("#Graph svg data")
Mais pas de chance. Des Idées?
2 réponses
Essayons ce code.
d3.select("#Graph svg").selectAll("g")
" g "signifie sélectionner tous les nœuds" g " sous le nœud svg.
Lorsque vous créez votre conteneur de données avec append, vous pouvez enregistrer la sélection dans une variable.
var dataContainer = graph.append("svg:g")
.attr("id","data");
Si vous faites de cette façon, vous n'aurez pas besoin de faire la sélection (de la même manière que vous l'avez fait avec graph sur la 1ère ligne), car il est déjà stocké dans votre var dataContainer.