d3与svg在处理元素时

Question

使用

之间是否有偏好

d3.selectAll()

和

svg.selectAll()

何时

var svg = d3.select("#someChart")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

处理（创建，删除）svg标签中的元素时？

Answer 1

正如AJ_91指出的那样，d3.selectAll(...)搜索整个文档，而svg.selectAll(...)将搜索限制在选择中的SVG。预计后者对大型文档的性能更高。

然而，还有另一个重要区别：如果var svg引用包含多个元素的d3选择，那么像svg.selectAll('path')这样的子选择将选择所有<path>在每个<svg>内按预期进行，但最终的选择也将保持＆＃34;意识＆＃34; ＆＃34;堂兄＆＃34;具有不同<path>父母的<svg>之间的关系。

这称为嵌套选择为bostock explains here。嵌套选择用于构造表，因为表意味着2级层次结构（ n 行，然后每行 m 列）。如果您有一个多级数据集，您希望创建多个SVG，其中每个SVG包含多个趋势线路径（或多个条形图<rect>），那么嵌套的svg选择类似于表。等）。