如何获取D3中筛选后子集的条目数？区域筛选场景技术求助

我明白你的困扰——筛选功能正常但拿不到筛选后的数量确实头疼！问题出在你直接访问entering.length的方式上，D3的enter选择集不是普通数组，直接取length得不到你想要的元素数量。下面给你两种可行的解决办法：

方法一：先筛选数据再处理（推荐） #

最清晰的方式是先把符合条件的数据单独提取出来，这样直接就能拿到数量，后续的DOM操作也更直观：

// 第一步：先筛选出目标区域的国家数据
var filteredCountries = 你的原始数据集.filter(function(d) {
  return d.Region === selRegion;
});

// 现在直接获取数量，想怎么用都行
var countryCount = filteredCountries.length;
console.log("筛选出的国家数量：", countryCount);

// 第二步：用筛选后的数据做后续的enter操作
var entering = d3.select("svg") // 替换成你的实际选择器
  .selectAll(".country-element") // 替换成你的元素类名
  .data(filteredCountries)
  .enter();

方法二：从enter选择集中提取数量 #

如果你不想提前筛选数据，也可以从已经处理好的enter选择集中获取元素数量，需要用nodes()方法把选择集转换成DOM元素数组，再取数组的length：

var entering = selection.enter()
  .filter(function(d) {
    return d.Region == selRegion;
  });

// 把选择集转成元素数组，再获取长度
var count = entering.nodes().length;
console.log("筛选出的国家数量：", count);

为什么原来的方法不行？ #

D3的选择集（包括enter选择集）是一个带有组结构的特殊对象，它的length属性其实代表的是组的数量，而不是你要的元素数量。当你用filter之后，组的结构可能导致这个length返回null或者不符合预期，而nodes()方法会把选择集中所有的DOM元素提取成一个普通数组，这时的length就是你要的筛选后元素总数啦。

内容的提问来源于stack exchange，提问作者user9797777