D3 Selecting an element inside an SVG

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


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?

Let’s try this code.

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

“g” means to select all node “g” under svg node.

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

var dataContainer = graph.append("svg:g")

If done in this way, you won’t ever 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.

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .
Read More:   Asynchronous api calls with redux-saga

Similar Posts