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時的樣子。 [對象，對象，對象]

非常感謝您的幫助。我試圖理解爲什麼它在嘗試創建rects時通過數據循環不止一次。另外，這是唯一有代表性的代碼。

Answer 1

您可能會看到在數據集中元素的數量和元素的dataAttr數量的交叉產品，因爲上面的代碼首先結合數據集：

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

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

當d3.js工作，鍍鉻「檢查元素'功能可能非常有用。