D3 Auswählen eines Elements in einem SVG

Question

Ich versuche, einige Grafiken in D3 zu erstellen. Bisher liebe es, aber ich bin ein bisschen festgefahren. Ich möchte einen Bereich erstellen, um die Datenpunkte und einen anderen zu halten, um die Achse und Etiketten zu halten. Ich denke, ich werde noch feinkörniger als das, um die Aktualisierung des Diagramms effizienter zu gestalten. Aber das Problem, das ich habe, ist, dass ich scheinbar Subelemente innerhalb des SVG nicht auswählen kann.

Hier ist was ich habe:

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

Jetzt habe ich keinen Weg gefunden, diesen Datencontainer auszuwählen. Ich habe versucht

d3.select("#Graph svg data")

Aber kein Glück. Irgendwelche Ideen?

Answer 1

Versuchen wir diesen Code.

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

"G" bedeutet, den gesamten Knoten "g" unter dem SVG -Knoten auszuwählen.

Answer 2

Beim Erstellen Ihres Datencontainers mit append(), Sie können es als Auswahl für eine Variable speichern.

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

Wenn Sie auf diese Weise durchgeführt werden, müssen Sie die D3 -Auswahl nicht einmal wieder treffen (auf ähnliche Weise, mit denen Sie mit var graph in der 1. Zeile des Codes in Ihrer Frage), da ein Verweis auf diese Auswahl bereits in Ihrem VAR gespeichert ist dataContainer.