基于功能的子选择

Question

我有一些选择的元素,我试图根据特定的样式值过滤掉(我想要只有opacity = 1的元素).我正在查看selection.filter的文档以及selection.select和selection.selectAll,但我对使用函数参数的正确用法感到困惑.

"select"表示它选择了第一个匹配元素(如预期的那样),但是过滤器文档中的示例显示它与函数一起使用,以在保持索引的同时选择"奇数"元素.

"selectAll"表示您可以返回一个元素数组,但是对于原始选择中的每个元素,以常规方式逐个调用函数参数.我很难想象一个用例.

我想我想知道的是,是否有任何教程或示例讨论这些函数的正确用法？

谢谢,斯科特

Answer 1

如果要将选择减少到所选元素的子集,请使用过滤器.如果要选择后代元素,请使用select或selectAll.

通常,过滤器用于根据数据或索引过滤元素.但是,您可以this在过滤器功能中访问所选元素.因此,如果您选择了某些元素,并且希望将该选择仅减少为不透明度为1的元素,则可以说:

var opaque = selection.filter(function() {
  return this.style.opacity == 1;
});

为安全起见,您可能更愿意查看计算样式而不是元素的样式属性.这样,如果从样式表继承不透明度,您将获得正确的值; 否则,当继承样式时this.style.opacity将是空字符串.

var opaque = selection.filter(function() {
  return window.getComputedStyle(this, null).getPropertyValue("opacity") == 1;
});

或者等效地,选择节点并使用selection.style:

var opaque = selection.filter(function() {
  return d3.select(this).style("opacity") == 1;
});

如果按数据或类过滤,而不是按计算样式属性过滤,则可能会更容易.例如,如果在节点上设置类,则可以按类过滤选择:

var opaque = selection.filter(".opaque");