d3 selectAll().data() 只是第一个元素中的 returns 数据。为什么

Question

我正在尝试使用 d3 获取所有匹配元素中的数据。我有以下代码

d3.selectAll('svg').selectAll('.line').data()

我期望的是它应该 return 所有匹配元素中的数据。但它只是 return 第一个匹配元素中的数据。

如果我这样做

d3.selectAll('svg').selectAll('.line')

这表明它有 2 个组元素，它的数据属性包含数据。

如果我只是这样做 var line = d3.selectAll('svg').selectAll('.line'); line[0].data()它会给我错误。因为 line[0] 成为 DOM 元素，没有任何属性

如何获取所有匹配选择中的数据，或者我不清楚如何使用它。

Answer 1

我看不到你的代码，所以我会给你看一个有效的代码：

// scene setup
// we generate 3 SVG tags inside the page <body> 
var $svg;
for (var svg = 0; svg < 3; svg++) {
   $svg = d3.select("body").append("svg:svg").attr({
      width: 200,
      height: 200,
      id: "svg_" + svg
   });
}

// multiple selection + data
// consider the array of colors as data
var array_of_colors = ["red", "yellow", "blue", "khaki", "gray", "green"];
d3.selectAll("svg").selectAll("line.dash").data(array_of_colors).enter()
        .append("svg:line").attr({
            x1: function(d){return(50 + Math.random() * 50);},// random coordinates
            y1: function(d){return(50 + Math.random() * 50);},// random coordinates
            x2: 150,
            y2: 140,
            "stroke-width": 2,
            stroke: function(d) {
                console.log(d);
                return (d);
            }
        }).classed({
            "dash": true
        });

代码在每个 SVG 元素中生成 6 行（作为数据数组的大小）：

看起来像：

Answer 2

这是 selection.data(values) 规范中的预期行为：

If values is not specified, then this method returns the array of data for the first group in the selection.

这就解释了为什么您只获取绑定到第一组的数据。

要访问根据您的选择返回的 all 组绑定的数据，您可以使用：

d3.selectAll('svg').selectAll('.line').each(function(d) {
    // Within this function d is this group's data.
    // Iterate, accumulate, do whatever you like at this point.
});

d3 selectAll().data() 只是第一个元素中的 returns 数据。为什么

d3 selectAll().data() just returns data in first element. why

d3.js