D3 Wybieranie elementu wewnątrz SVG

Question

Próbuję utworzyć niektóre wykresy w D3. Do tej pory uwielbiam to, ale trochę utknęłam. Chcę utworzyć obszar do przechowywania punktów danych, a drugi do przechowywania osi i etykiet. Myślę, że pójdę jeszcze bardziej drobnoziarniście, aby aktualizacja wykresu była bardziej wydajna. Ale problem, który mam, polega na tym, że nie mogę wybrać elementów podrzędnych w SVG.

Oto co mam:

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

Teraz nie znaleźli sposób, aby wybrać ten kontener danych. Wypróbowałem:

d3.select("#Graph svg data") 

Ale bez powodzenia. Jakieś pomysły?

Answer 1

Spróbujmy tego kodu.

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

"g" oznacza wybrać cały węzeł "g" w węźle svg.

Answer 2

Podczas tworzenia kontenera danych za pomocą append, można zapisać wybór do zmiennej.

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

Jeśli wykonane w ten sposób, że nie będzie musiał dokonać wyboru (w podobny sposób zostały wykonane z wykresu na 1 linię), ponieważ jest już przechowywane w var dataContainer.