Javascript d3.js-使用.selectAll（）根据属性值选择节点元素

我有这样一个节点：

<div>
  <svg ...>
    <g class="graph">
      <path class="myarea" d="...AAA..." pos="p1">  </path>
    </g>
    <g class="graph">
      <path class="myarea" d="...BBB..." pos="p2">  </path>
    </g>
    <g class="graph">
      <path class="myarea" d="...CCC..." pos="p3">  </path>
    </g>
  /svg>
</div>

这将生成/返回包含所有3个条目的数组：

->p0错误

->p1正确

->p2错误

->[阵列（3）]

我只想选择一个元素，在本例中是带有

.attr（“pos”）=“p2”

的元素，因此我只想返回一个元素

我尝试了

map（）

和

filter（）

但没有成功

基于属性值选择特定元素的正确方法是什么？

Selection.filter（）

您可以根据类选择一组元素，然后使用

selection.filter（）

：

var svg=d3.选择（“svg”）；
svg.selectAll（“rect”）
.filter（函数（）{
返回d3.select（this）.attr（“col”）==2
})
.attr（“填充”、“橙色”）

您不能使用类似于
d3.selectAll（“.myarea[d='BBB'][pos='p2']”）的东西吗
，d3支持任何有效的css选择器，例如（匹配单个属性）和（匹配多个属性）Nice，它们都可以工作。不知道该语法
。选择（.myarea[pos='p2']）
d3.selectAll(".myarea").each(function(d,i) {
   console.log("-> ",  d3.select(this).attr("pos"), d3.select(this).attr("pos") == 'p2' );
  
});

svg.selectAll("whatever")
  .filter(function() {
    return d3.select(this).attr("col") == 2; // filter by single attribute
  })