D3.js: Get an array of the data attached to a selection?

问题:

I'd like to get an array of all the data attached to a selection in D3.

I'm working with the example from the General Update pattern, and trying this:

var text = svg.selectAll("text")   .data(data, function(d) { return d; });  var textEnter = text.enter().append("text")   .attr("class", "enter")   .text(function(d) { return d; });  console.log('textEnter data', textEnter[0]);  var textEnterKeys = d3.map(textEnter[0], function(d) {    return d.__data__; });  console.log('textEnterKeys', textEnterKeys); 

But textEnterKeys just looks exactly the same as textEnter. How can I get an array of the data attached to each element in the selection?

回答1:

You can simply call .data() without any arguments on a selection to get the bound data. See the documentation:

If values is not specified, then this method returns the array of data for the first group in the selection. The length of the returned array will match the length of the first group, and the index of each datum in the returned array will match the corresponding index in the selection. If some of the elements in the selection are null, or if they have no associated data, then the corresponding element in the array will be undefined.

This does not work for the .enter() selection as there are no elements yet to which the data can be bound. In this case, the .map function can be used:

textEnter.map(function(d) { return d.__data__; }); 

回答2:

This is an old question but I was also wondering about it. The state passed in through selection.data is not lost but it is dispersed across the update and enter groups. It can be retrieved, in tact, reasonably reliably with this function...

function getData2(/*this is update*/) {     if (this.enter /*quick duck type test...*/) {         var enter = this.enter(), retVal = []          for (var i = 0; i < this.length; i++) {              retVal.push([])              for (var j = 0; j < enter.length; j++) {                 retVal[i].push(enter[i][j] || enter[i].update[j])                 retVal[i][j] = retVal[i][j] && retVal[i][j].__data__                 if (!retVal[i][j]) {                     retVal[i].pop()                 }              }          }         return (this.length > 1 ? retVal : retVal[0])     } } 

usage...

console.log(getData2.call(update)) 

OR...

d3.selection.prototype.data2 = getData2 // ... console.log(update.data2()) 

where update is the update collection returned by selection.data(array)

回答3:

Or you can use datum() to get the data if you used datum(someData) to bind.

文章来源: D3.js: Get an array of the data attached to a selection?