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

我认为你应该采用的最佳方法是利用类并为不同的svgs添加适当的类，然后根据类而不是svg进行选择。通过这种方式，您可以了解每个svgs代表的内容，并且您可以轻松地引用它们。＆＃39;

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，下面的代码片段只返回包含在其中的svgs。

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

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

d3忽略selectAll上的SVG

2 个答案: