D3 Seleccionar un elemento dentro de un SVG

Question

Estoy intentando crear algunos gráficos en D3. Hasta el momento me encanta, pero me estoy quedando un poco atrapado. Quiero crear un área para contener los puntos de datos y otra para contener el eje y las etiquetas. Creo que iré incluso más fino que eso para que la actualización del gráfico sea más eficiente. Pero el problema que estoy teniendo es que parece que no puedo seleccionar elementos secundarios dentro del SVG.

Aquí es lo que tengo:

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") 

ahora no he encontrado una manera de seleccionar dicho contenedor de datos. Lo he intentado

d3.select("#Graph svg data") 

Pero no hubo suerte. ¿Algunas ideas?

Answer 1

Probemos este código.

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

"g" significa seleccionar todo el nodo "g" en el nodo svg.

Answer 2

Al crear su contenedor de datos con append, puede guardar la selección en una variable.

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

Si se hace de esta manera usted no tendrá que hacer la selección (de forma similar que ha hecho con el gráfico en la primera línea), debido a que ya está almacenado en la var dataContainer.