在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“檢查元素”功能可能超級有用。