javascript - 尝试使用 d3 更新 rect 时出错

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")
   // ...