D3 seleccionar un elemento dentro de un SVG

Question

Estoy tratando de crear algunos gráficos en D3. Hasta ahora me encanta, pero me estoy atascando un poco. Quiero crear un área para contener los puntos de datos y otro para sostener el eje y las etiquetas. Creo que iré aún más grano fino que 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 sub elementos dentro del SVG.

Esto 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 ese contenedor de datos. Yo he tratado

d3.select("#Graph svg data")

Pero no hay 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 guardarlo como una selección a una variable.

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

Si se hace de esta manera, ni siquiera necesitará volver a hacer la selección D3 (de manera similar, lo ha hecho con var graph en la primera línea del código en su pregunta), porque una referencia a esta selección ya está almacenada en su var. dataContainer.