d3 在 selectAll 上忽略 SVG答案

【问题标题】：d3 ignore SVG on selectAlld3 在 selectAll 上忽略 SVG
【发布时间】：2013-09-03 20:56:24
【问题描述】：

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

【问题讨论】：

标签： javascript html css svg d3.js

【解决方案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 元素

【讨论】：

感谢八月，您为我指明了正确的方向。当动态创建两个中间 SVG 面板时，我可以使用 .selectAll("svg.data") 而不是 .selectAll("svg")。这样做会忽略顶部的 SVG 面板。

【解决方案2】：

或者，您可以将 svg 元素嵌入到不同的 div 中。假设您有一个 id 为 'center-div' 的 div，下面的 sn-p 只返回其中包含的 svg。

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

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

【讨论】：