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

尝试使用d3更新rects时出错

1 个答案: