Question

如果我想根据子节点的存在过滤元素，我将如何在d3.js中执行此操作？

例如，在此html结构中，如何选择具有子<li>元素的<a>元素？

<ul>
    <li><a href="#">Link 1</a></li>
    <li>Bullet</li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li>Bullet</li>
</ul>

对于那些不知道的人，it's perfectly okay to ask and answer your own questions...

Answer 1

使用filter()功能：

var ul = d3.select("ul");
var lis = ul.selectAll("li").filter(function() {
    return ! d3.select(this).select("a").empty();
});

Answer 2

您使用原生Javascript冷解决问题：

首先，您可以选择“li”元素中的所有“a”元素：

var childLinks = document.querySelectorall("ul li a");   // Supported By IE8+

然后，您可以为每个父母选择父母：

childLinks[0].parentNode

原生方法应该更快。

基于子节点存在的过滤元素

2 个答案: