Question

我有以下DOM

<g id="s1s2" class="contact">
    <g class="baseCircle">
        <path id="s1s2_base">
    </g>
    <path >
    <path >
</g>

我希望得到所有没有id的路径。我试过了

d3.select('g#s1s2.contact').selectAll('path:not(id)');

返回所有路径：

[[path#s1s2_base, path, path]]

有什么建议吗？

Answer 1

你的选择器有点偏。要选择所有不具有id属性的元素，您可以使用"path:not([id])"。请注意，它如何使用额外的方括号表示这实际上是attribute selector。

＆＃13;

console.log(d3.selectAll("path:not([id])").size());   // 2

＆＃13;

<script src="https://d3js.org/d3.v4.js"></script>

<svg>
  <g id="s1s2" class="contact">
      <g class="baseCircle">
          <path id="s1s2_base"/>
      </g>
      <path />
      <path />
  </g>
</svg>

＆＃13;

Answer 2

在D3中，没有第二个参数的.attr()函数可以用作 getter 。

因此，选择所有<path>并过滤它们，从而消除具有ID的那些。在那种情况下，

!d3.select(this).attr("id")

将为此类路径返回true。

var noId = d3.selectAll("path").filter(function() {
    return !d3.select(this).attr("id")
});

console.log(noId.attr("class"));

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg>
	<path id="foo" class="hasID"></path>
	<path id="bar" class="hasID"></path>
	<path class="noID"></path>
	<path id="baz" class="hasID"></path>
</svg>

PS ：作为S.O.在尝试console.log D3选择时片段冻结，这里有一个相同代码的小提琴：https://jsfiddle.net/n615hqub/

Answer 3

您必须更改您不想选择的元素ID的id：

d3.select('g#s1s2.contact').selectAll('path:not(#s1s2_base)');

d3选择没有id的元素

3 个答案: