我带来了一些符合 D3 标准的代码。但现在我的更新功能出现问题。我正在尝试遵循General Update Pattern。
当我运行该函数时,控制台中出现错误:"TypeError: gbars.enter(...).attr is not a function"
function updateBars()
{
xScale.domain(d3.range(dataset.length)).rangeRoundBands([0, w], 0.05);
yScale.domain([0, d3.max(dataset, function(d) { return (d.local > d.global) ? d.local : d.global;})]);
var gbars = svg.selectAll("rect.global")
.data(dataset);
gbars.enter()
.attr("x", w)
.attr("y", function(d) {return h - yScale(d.global); })
.attr("width", xScale.rangeBand())
.attr("height", function(d) {return yScale(d.global);});
gbars.transition()
.duration(500)
.attr("x", function(d, i) {
return xScale(i);
})
.attr("y", function(d) {
return h - yScale(d.global);
})
.attr("width", xScale.rangeBand())
.attr("height", function(d) {
return yScale(d.global);
});
gbars.exit()
.transition()
.duration(500)
.attr("x", -xScale.rangeBand())
.remove();
}
我明白了,我一般来说更新功能可能有很多错误,但是刚开始挂断时很难排除故障。
我的更新目标是从图表中删除/添加系列。他们可以选择显示全局、本地或两者(默认)。我实际上更喜欢当他们将鼠标悬停在图例上时,它只显示该系列。在鼠标移出时,它将恢复为默认值。