d3.jsselectAll方法没有选择所有元素？

html5 • • 问答

我是 d3.js 的新手。文档告诉我.selectAll“选择与指定选择器字符串匹配的所有元素”。但是当我尝试使用d3.selectAll("p").selectAll("b")获取b以下 html 代码中的所有元素时，未选择最后一个 b 元素：

<p>
    <b>selected</b>
    <b>selected</b>
    <h4>some word</h4>
    <b>not selected</b>
</p>

<p>
    <b>selected</b>
    <b>selected</b>
    <h4>some word</h4>
    <b>not selected</b>
</p>

有人可以帮我解决这个问题吗？谢谢！

var selection = d3.selectAll("p").selectAll("b");

console.log("b elements selected: ", selection.size());

回答

一个p元素不能包含一个h4元素。Ap只能包含短语内容，例如b元素。在您的情况下，h4标签关闭p：

如果 <p> 元素后紧跟一个 ... <h4>, ... ( source ) ，则可以省略结束标记

所以你的第三个b根本不在 a 里面p。这就是为什么你不能选择它作为p. 您可以尝试使用两个p元素，使用h4其间，或者您可以使用span具有适当样式的 a：

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

<p>
    <b>selected</b>
    <b>selected</b>
</p>
    <h4>some word</h4>
<p>
    <b>not selected</b>
</p>

<script>
var selection = d3.selectAll("p").selectAll("b");

console.log(selection.size());


</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

<p>
    <b>selected</b>
    <b>selected</b>
    <span>some word</span>
    <b>not selected</b>
</p>

<script>
var selection = d3.selectAll("p").selectAll("b");

// for demonstration as all `b` elements are in the first `p` element.
var selection2 = d3.select("p").selectAll("b");


console.log(selection.size());
console.log(selection2.size());


</script>

以上是d3.jsselectAll方法没有选择所有元素？的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>
相关内容