D3 Selecting an element inside an SVG

Question

I am trying to create some graphs in D3. So far love it, but I'm getting a bit stuck. I want to create one area to hold the data points and another to hold the axis and labels. I think I will go even more fine grained than that to make updating the graph more efficient. But the issue I am having is that I can't seem to select sub elements within the SVG.

Here is what I have:

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

Now I have not found a way to select that data container. I have tried

d3.select("#Graph svg data")

But no luck. Any Ideas?

Answer 1

Let's try this code.

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

"g" means to select all node "g" under svg node.

Answer 2

When creating your data container with append(), you can save it as a selection to a variable.

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

If done in this way, you won't even need to make the d3 selection again (in a similar way you have done with var graph on the 1st line of the code in your question), because a reference to this selection is already stored in your var dataContainer.