javascript - 处理元素时 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> 内的 s正如预期的那样，但由此产生的选择也将保持对 <path> 之间的“表兄弟”关系的“认识”。具有不同的<svg> parent 。

这称为嵌套选择，如 bostock explains here 。嵌套选择用于构建表格，因为表格意味着 2 级层次结构(n 行，然后每行 m 列)。嵌套 svg-selection 类似于表格，如果您有一个多级数据集，您想从中创建多个 SVG，每个 SVG 都包含多个趋势线路径(或多个条形图 <rect> 等)。