30

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

我正在使用General Update 模式中的示例，并尝试这样做：

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);

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

4

4 回答 4

46

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

如果未指定值，则此方法返回选择中第一组的数据数组。返回数组的长度将匹配第一组的长度，并且返回数组中每个数据的索引将匹配选择中的相应索引。如果选择中的某些元素为空，或者它们没有关联数据，则数组中的相应元素将是未定义的。

这不适用于.enter()选择，因为还没有可以绑定数据的元素。在这种情况下，.map可以使用该函数：

textEnter.map(function(d) { return d.__data__; });
于 2013-04-17T10:26:19.917 回答
2

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

mySelection.attr("stroke", (_, __, nodes) => {
  let data = d3.selectAll(nodes).data()
  // Now you can use data.
}
于 2019-06-13T15:09:24.770 回答
0

这是一个老问题，但我也想知道。通过 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])
    }
}

用法...

console.log(getData2.call(update))

或者...

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

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

于 2015-03-10T14:35:55.620 回答
0

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

于 2017-07-20T10:12:41.323 回答