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

时间:2013-04-17 10:18:51

标签: javascript d3.js

我想获得附加到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完全相同。如何获取附加到选择中每个元素的数据数组?

4 个答案:

答案 0 :(得分:34)

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

  

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

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

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

答案 1 :(得分:1)

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

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

答案 2 :(得分: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))

... OR

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

其中update是selection.data(array)返回的更新集合

答案 3 :(得分:0)

如果您使用datum()进行绑定,也可以使用datum(someData)来获取数据。