0

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

4

2 回答 2

0

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

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

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

于 2013-09-03T12:56:24.043 回答
0

我认为最好的方法是利用类并为不同的 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")使用该类仅选择 svg 元素data

于 2013-09-03T06:50:58.183 回答