处理元素时 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(...) 将搜索限制在 selection 中的 SVG。预计后者对于大型文档的性能更高。

然而，还有另一个重要的区别：如果 var svg 引用包含多个元素的 d3 selection，那么子 selection 如 svg.selectAll('path') 将 select 每个 <svg> 内的所有 <path> 如预期的那样，但由此产生的 selection 也将保持 "awareness" 之间的 "cousin" 关系<path> 具有不同的 <svg> parents.

这称为嵌套 selection 作为 bostock explains here。嵌套的 selection 用于构建表格，因为表格暗示了 2 级层次结构（n 行，然后每行 m 列） .如果你有一个 multi-level 数据集，你想从中创建多个 SVG，每个包含多个趋势线路径（或多个条形图 <rect>s 等），则 nested-svg-selection 类似于表格.

处理元素时 d3 与 svg

d3 vs. svg When Dealing with Element

javascript

svg

d3.js