D3 Selezione di un elemento all'interno di un SVG

Question

Sto provando a creare alcuni grafici in D3. Finora lo amo, ma mi sto bloccando un po '. Voglio creare un'area per contenere i punti dati e un'altra per contenere l'asse e le etichette. Penso che andrò ancora più a grana fine per rendere più efficiente l'aggiornamento del grafico. Ma il problema che sto avendo è che non riesco a selezionare i sotto elementi all'interno di SVG.

Ecco quello che ho:

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

Ora non ho trovato un modo per selezionare il contenitore di dati. Ho provato

d3.select("#Graph svg data") 

Ma senza fortuna. Qualche idea?

Answer 1

Proviamo questo codice.

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

"g" significa selezionare tutto il nodo "g" sotto il nodo svg.

Answer 2

Durante la creazione del contenitore dati con append, è possibile salvare la selezione in una variabile.

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

Se fatto in questo modo non sarà necessario effettuare la selezione (in modo simile che avete fatto con il grafico sulla linea 1), perché è già memorizzato nel vostro var dataContainer.