如何生成一个完全由DOM元素及其所有后代组成的d3选择？

Question

假设X是一些任意DOM元素 ¹ 。如何生成完全包含X 及其所有后代的d3.js选项？

（请注意，d3.select(X).selectAll('*')给出的选择将包含X的所有后代，但它本身不包含X。）

---

^{1 对于这个问题，X的唯一约束是表达式d3.select(X)计算为有效的d3.js选择。} < / p>

Answer 1

由于d3.selectAll(nodes)接受类似数组的对象作为参数，您可以obtain a NodeList节点x的所有后代，将其转换为数组并将节点x添加到其中。将此数组传递给d3.selectAll()将返回包含节点x及其所有后代的所需选择。

检查此工作JSFiddle：

var x = d3.select("#a_2").node(); // your node

// Get all children of node x as NodeList and convert to Array.
var xAndDescendants = Array.prototype.slice.call(  
        x.querySelectorAll("*")
    );  

// Add node x to the beginning
xAndDescendants.unshift(x);

// Select resulting array via d3.js
var selection = d3.selectAll(xAndDescendants);

Answer 2

d3.selectAll("X, X *")

应该有效