我有一个按钮,可以使用新 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(); })
最佳答案
您的 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")
// ...
关于javascript - 尝试使用 d3 更新 rect 时出错,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33961712/