d3与svg在处理元素时的对比

d3 vs. svg When Dealing with Element

本文关键字：元素 处理 svg d3      更新时间：2023-09-26

在使用之间有偏好吗

d3.selectAll()

和

svg.selectAll()

当

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

在处理svg标记中的元素（创建、删除）时？

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

然而，还有另一个重要的区别：如果var svg引用了一个包含多个元素的d3选择，那么像svg.selectAll('path')这样的子选择将按预期选择每个<svg>中的所有<path>，但最终的选择也将保持对具有不同<svg>父代的<path>之间的"表亲"关系的"意识"。

正如博斯托克在这里解释的那样，这被称为嵌套选择。嵌套选择用于构建表，因为表意味着两级层次结构（每行n行，然后m列）。嵌套的svg选择类似于表，如果您有一个多级数据集，希望从中创建多个svg，每个svg都包含多个趋势线路径（或多个条形图<rect>s等）。

相关文章：