在d3中绑定数据会追加太多次

Question

我有3个JSON对象的数组，我想在d3中绑定以创建一些矩形。 但是，它不仅要遍历数组一次，而且还要遍历数组多次。 我想知道这段代码是否错误。

var w = 5000;
var h = 5000;
var svg = d3.select("body")
         .append("svg")
     .attr("width", w)   
     .attr("height", h);    

var elem = svg.selectAll("g")
         .data(dataset) 

var elemEnter = elem.enter()
                .append("g")

var rects = elemEnter.selectAll("rect")
            .data(dataArr)
            .enter()
            .append("rect")
            .attr("x", function(d, i) {
                console.log(i);
                return 75;
            })
            .attr("y", function(d, i) {
                return (i * 50) + 25;
            });

作为参考，这是我在控制台中打印出dataArr时的样子。 [对象，对象，对象]

非常感谢帮忙。 我一直试图了解为什么它在尝试创建rect时会多次遍历数据。 此外，这是具有rect的代码中的唯一位置。

Answer 1

您可能会看到数据集中元素数量与dataAttr中元素数量的乘积，因为上面的代码首先绑定了数据集：

var elem = svg.selectAll("g")
    .data(dataset) 

var elemEnter = elem.enter()
    .append("g") 

当使用d3.js时，chrome“检查元素”功能可能超级有用。