问题描述
假设 X
是一些任意的DOM元素。如何生成包含 X
及其所有后代的d3.js选择?
Suppose that X
is some arbitrary DOM element. How can I generate a d3.js selection containing exactly X
and all its descendants?
(注意 d3.select(X).selectAll('*')
给出的选择将包含 X
,但不会包含
X
本身。)
(Note that the selection given by d3.select(X).selectAll('*')
will contain all the descendants of X
, but it will not contain X
itself.)
对于这个问题, X
的唯一约束是表达式 d3.select (X)
评估为有效的d3.js选择。
For this question, the only constraint on X
is that the expression d3.select(X)
evaluate to a valid d3.js selection.
推荐答案
a href =https://github.com/mbostock/d3/wiki/Selections#d3_selectAll =nofollow> d3.selectAll(nodes)
接受数组式对象作为参数,您可以,将其转换为数组并将您的节点x添加到它。将此数组传递到 d3.selectAll()
将返回包含节点x及其所有后代的所需选择。
Since d3.selectAll(nodes)
accepts an array-like object as a parameter you could obtain a NodeList
of all descendants of your node x, convert it to an array and add your node x to it. Passing this array to d3.selectAll()
will return the desired selection containing node x as well as all its descendants.
检查此操作:
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);
这篇关于如何生成一个完全由DOM元素及其所有后代组成的d3选择?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!