D3.js：获取附加到选择的数据数组？

Question

我想得到一个附加到D3中选择的所有数据的数组。

我正在使用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);

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

Answer 1

你可以简单地调用.data()而不需要选择任何参数来获取绑定数据。见the documentation：

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

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

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

Answer 2

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

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

Answer 3

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

其中update是selection.data（array）返回的更新集合

Answer 4

或者，如果您使用datum()进行绑定，则可以使用datum(someData)获取数据。