Question

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

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

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

如果我这样做

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

这表明它有2个group元素，其 data 属性包含数据。

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

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

Answer 1

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

如果未指定值，则此方法返回数据数组对于选择中的第一组。

这就解释了为什么你只得到绑定到第一组的数据。

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

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

Answer 2

我看不到你的代码，因此我会告诉你一个有用的代码：

// 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行（作为数据数组的大小）：

enter image description here

看起来像：

enter image description here

d3 selectAll（）。data（）只返回第一个元素中的数据。为什么

2 个答案: