d3在selectAll上忽略SVG

Question

仍在学习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？

Answer 1

我认为最好的方法是利用类，然后将适当的类添加到不同的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元素

Answer 2

另外，您可以将svg元素嵌入不同的div中。 假设您有一个id为“ center-div”的div，则以下代码段仅返回其中包含的svg。

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

还请注意，您可以通过d3附加任何DOM元素，因此可以动态生成div。