d3.js - 从 d3 选择中获取所有 dom 节点

Question

selection.node() 返回 only the first节点。我们可以从选择中获取所有节点的数组吗？

编辑添加了一些代码来帮助我们。

• 使用 each() 的尝试是唯一产生所​​需结果的尝试输出，尽管相当冗长。
• 调用 sel[0] 还会返回一个包含 DOM 节点的数组，但它很糟糕(取决于库的内部结构)，并且包含不需要的“parentNode”字段。

// creating a selection to experiment with
var data= [1,2,3,4]
var sel = d3.select("li")
	.data(data)
	.enter().append("li").html(identity);
function identity(d){return d}
console.log(sel); // array[1] with array[4] with the <li>'s 

// using .node()
var res1 = sel.node();
console.log(res1); // first <li> only

// using .each() to accumulate nodes in an array
var res2 = [];
function appendToRes2(){
	res2.push(this);
}
sel.each(appendToRes2);
console.log(res2); // array[4] with the <li>'s (what I want)

// calling sel[0]
var res3 = sel[0];
console.log(res3); // array[4] with the <li>'s plus a "parentNode"

// @thisOneGuy's suggestion
var res4 = d3.selectAll(sel);
console.log(res4); // array[1] with array[1] with array[4] with the <li>'s

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

编辑 2 我为什么要这样做？
调用array methods就像 DOM 节点上的 reduce 和 map 一样。 D3 提供过滤器，但要使用其他过滤器，我首先需要从选择中提取节点数组。

Answer 1

我最初将其写为评论，但决定将其变成答案......

看起来 d3 v4 将 include the functionality you want 。如果你不想等，可以盗取implementation now并将其添加到选择原型(prototype)中:

 d3.selection.prototype.nodes = function(){
   var nodes = new Array(this.size()), i = -1;
   this.each(function() { nodes[++i] = this; });
   return nodes;
 }

<小时/>

使用示例:

d3.selection.prototype.nodes = function(){
  var nodes = new Array(this.size()), i = -1;
  this.each(function() { nodes[++i] = this; });
  return nodes;
}


var data= [1,2,3,4]
var sel = d3.select("li")
	.data(data)
	.enter().append("li").html(identity);
function identity(d){return d}

console.log(sel.nodes());

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

由于它来自@mbostock，因此很有可能是可用的最佳实现。