Question

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

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

each()的尝试是唯一一个产生想要的人输出，虽然相当冗长。
调用sel[0]也会返回一个带有DOM节点的数组，但它的hacky（取决于库的内部结构）并包含一个不需要的＆＃34; parentNode＆＃34;字段。

＆＃13;

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

＆＃13;

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

＆＃13;

编辑2 为什么我要这样做？
在DOM节点上调用array methods，如reduce和map。 D3提供filter但是为了使用其他我首先需要从选择中提取节点数组。

Answer 1

我最初把它写成评论，但决定把它变成答案......

看起来d3 v4会include the functionality you want。如果您不想等待，可以窃取implementation now并将其添加到选择原型中：

 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，所以最好的实施方案是一个不错的选择。

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

1 个答案: