D3 Selezione di un elemento all'interno di uno SVG

Question

Sto cercando di creare alcuni grafici in D3. Finora l'amore, ma io sto diventando un po 'bloccato. Voglio creare una zona per contenere i punti dati e un altro per tenere l'asse e le etichette. Penso che andrò ancora più bella grana di quella di rendere l'aggiornamento del grafico più efficiente. Ma il problema che sto avendo è che io non riesco a selezionare gli elementi secondari all'interno del 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 cercato

d3.select("#Graph svg data")

, ma senza fortuna. Tutte le idee?

Answer 1

Proviamo questo codice.

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

significa "g" per selezionare tutti i nodi "g" nel nodo SVG.

Answer 2

Quando si crea il contenitore di dati con append(), è possibile salvarlo come una selezione a una variabile.

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

Se fatto in questo modo, non sarà nemmeno bisogno di fare ancora una volta la selezione d3 (in modo simile avete fatto con var graph sulla linea 1 del codice nella tua domanda), perché un riferimento alla presente selezione è già memorizzati nel vostro var dataContainer.