D3 Selecting an element inside an SVG
-
27-10-2019 - |
문제
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?
해결책
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")
.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
.