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。