d3 ignore SVG on selectAll

Question

Still learning d3.js.

I would like to ignore the selection of an SVG panel when using .selectAll("svg").

I am building a visualization comprising four SVG panels. The top SVG panel is used to display header/title information for the visualization.

var svgHeader = d3.select("body")
    .append("svg")  
    .attr("width", width + margin.left + margin.right)
    .attr("height", 100)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .append("g");

The next two SVG panels are dynamically created using a range of two numbers representing two years.

var svg = d3.select("body")
    .selectAll("svg")   
    .data(d3.range(2012, 2013))
    .enter().append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", 200)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .append("g");

The final SVG contains detail information as the user interacts with the visualization.

Problem: I want to exclude the first SVG panel from the .selectAll("svg") which is used to create the two middle panels. I would like to dynamically build SVG panels and have them locate underneath the previously created header SVG.

Is there any way to exclude the header SVG when dynamically creating the middle panels?

Answer 1

I think the best way you should be going about this is taking advantage of classes and adding an appropriate class to the different svgs and then selecting based on the class rather than the svg. This way you know what each of the svgs represent and you can easily reference them.'

var svgHeader = d3.select("body")
    .append("svg")
    .attr("class", "svgHeader")
    .attr("width", width + margin.left + margin.right)
    .attr("height", 100)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .append("g");

And then the other two you add a different class name

var svg = d3.select("body")
    .selectAll("svg")   
    .data(d3.range(2012, 2013))
    .enter().append("svg")
    .attr("class", "data") 
    .attr("width", width + margin.left + margin.right)
    .attr("height", 200)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .append("g");

Now you can do d3.selectAll("svg.data") and select only svg elements with the class data

Answer 2

Alternatively, you can embed your svg elements in different divs. Assuming you have a div whose id is 'center-div' the following snippet returns you only the svgs contained in it.

d3.selectAll("#center-div svg")

Please also consider that you can append whatever DOM element via d3, so divs can be dinamically generated.