Question

If I wanted to filter elements based on the existence of their child nodes, how would I do that in d3.js?

For example in this html structure, how would I select the <li> elements that have children <a> elements?

<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>

For those who don’t know, it’s perfectly okay to ask and answer your own questions…

Answer 1

Use the filter() function:

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