web-dev-qa-db-fra.com

D3 Sélection d'un élément dans un SVG

J'essaie de créer des graphiques en D3. Jusqu'à présent, j'adore ça, mais je suis un peu coincé. Je veux créer une zone pour contenir les points de données et une autre pour contenir 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é de moyen de sélectionner ce conteneur de données. j'ai essayé

d3.select("#Graph svg data")

Mais pas de chance. Des idées?

javascriptsvgd3.js
21
Dan Walmsley

Essayons ce code.

d3.select("#Graph svg").selectAll("g")

"g" signifie sélectionner tous les nœuds "g" sous le nœud svg.

22
lahphim

Lorsque vous créez votre conteneur de données avec append(), vous pouvez l'enregistrer en tant que sélection dans une variable.

var dataContainer = graph.append("svg:g")
    .attr("id","data");

Si cela est fait de cette façon, vous n'aurez plus jamais besoin de refaire la sélection d3 (de la même manière que vous l'avez fait avec var graph sur la 1ère ligne du code dans votre question), car une référence à cette sélection est déjà stockée dans votre var dataContainer.

1
ksav