嘗試使用d3更新矩形時的錯誤

Question

我有一個按鈕，它使用與csv文件相同的新csv文件中的信息重新繪製堆積的條形圖。

圖表本身被重繪，但矩形不調整，我收到以下錯誤：

selection.selectAll(...).data is not a function 

我已經運行測試和數據確實存在。我是d3新手，目前有點混亂。

這是代碼，創建錯誤塊：

 var svg = d3.select("body").transition(); 

     //add x and y axis  
     svg.select(".x.axis") // change the x axis 
      .duration(750) 
      .call(xAxis); 
     svg.select(".y.axis") // change the y axis 
      .duration(750) 
      .call(yAxis); 

    var selection = svg.selectAll(".series") 
     .duration(750)   
     .attr("transform", function (d) { return "translate(" + x(d.quarter) + "," + y2(d.quarter) +")"; }); 

     //error happens after this part 
     selection.selectAll("rect") 
      .data(function (d) { return d.mapping; }) 
     .enter().append("rect") 
      .attr("width", x.rangeBand()) 
      .attr("y", function (d) { return y(d.y1); }) 
      .attr("height", function (d) { return y(d.y0) - y(d.y1); }) 
      .style("fill", function (d) { return color(d.name); }) 
      .style("stroke", "grey") 
      .on("mouseover", function (d) { showPopover.call(this, d); }) 
      .on("mouseout", function (d) { removePopovers(); }) 

Answer 1

你selection變量實際上是一個過渡，而不是一個選擇，那沒有.data()功能。您需要類似

var svg = d3.select("body"); 

    //add x and y axis  
    svg.select(".x.axis") // change the x axis 
     .transition() 
     .duration(750) 
     .call(xAxis); 
// etc 

var selection = svg.selectAll(".series"); 

selection.duration(750)   
    .attr("transform", function (d) { return "translate(" + x(d.quarter) + "," + y2(d.quarter) +")"; }); 

    selection.selectAll("rect") 
     .data(function (d) { return d.mapping; }) 
    .enter().append("rect") 
    // ...