Javascript d3在selectAll上忽略SVG

还在学习d3.js

我想在使用.selectAll（“SVG”）时忽略SVG面板的选择

我正在构建一个包含四个SVG面板的可视化。顶部的SVG面板用于显示用于可视化的标题/标题信息

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

接下来的两个SVG面板是使用表示两年的两个数字范围动态创建的

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

最终的SVG包含用户与可视化交互时的详细信息

问题：我想从用于创建两个中间面板的.selectAll（“SVG”）中排除第一个SVG面板。我希望动态构建SVG面板，并将它们放置在先前创建的SVG标题下

---

在动态创建中间面板时，有没有办法排除标题SVG？

我认为最好的方法是利用类，向不同的SVG添加适当的类，然后根据类而不是SVG进行选择。这样，您就可以知道每个SVG代表什么，并且可以轻松地引用它们。”

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

然后另外两个添加不同的类名

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

---

现在，您可以执行

d3.selectAll（“svg.data”）

并仅选择具有类

data

的svg元素。或者，您可以将svg元素嵌入到不同的div中。假设您有一个id为“center div”的div，下面的代码段只返回其中包含的SVG

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

---

也请考虑，可以通过D3追加任何DOM元素，这样DIN可以被自动生成。 谢谢，你为我指明了正确的方向。动态创建两个中间的SVG面板时，我可以使用.selectAll（“SVG.data”）而不是.selectAll（“SVG”）。这样做会忽略顶部的SVG面板。