javascript D3.js:获取附加到选择的数据数组?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16057485/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 03:05:51  来源:igfitidea点击:

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

javascriptd3.js

提问by Richard

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

我想获取附加到 D3 中选择的所有数据的数组。

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

我正在使用General Update pattern 中的示例,并尝试以下操作:

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 textEnterKeysjust looks exactly the same as textEnter. How can I get an array of the data attached to each element in the selection?

textEnterKeys只是看起来完全一样textEnter。如何获取附加到选择中每个元素的数据数组?

回答by Lars Kotthoff

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

您可以简单地调用.data()不带任何参数的选择来获取绑定数据。请参阅文档

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 .mapfunction can be used:

这对.enter()选择不起作用,因为还没有可以绑定数据的元素。在这种情况下,.map可以使用该函数:

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

回答by fmg

If you want to access the entire data array from within a modification function, e.g., selection.attr, you can use the fact that the entire selection is passed to the modification function as its third argument. So you can reconstruct the data array as follows:

如果您想从修改函数中访问整个数据数组,例如,selection.attr,您可以使用整个选择作为其第三个参数传递给修改函数的事实。因此,您可以按如下方式重建数据数组:

mySelection.attr("stroke", (_, __, nodes) => {
  let data = d3.selectAll(nodes).data()
  // Now you can use data.
}

回答by Cool Blue

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

这是一个老问题,但我也想知道。通过 selection.data 传入的状态不会丢失,但它会分散在更新和输入组中。可以使用此功能合理可靠地检索它......

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 updateis the update collection returned by selection.data(array)

updateselection.data(array) 返回的更新集合在哪里

回答by Felix

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

或者,datum()如果您曾经datum(someData)绑定过,则可以使用来获取数据。