我正在将转换应用于我的图表。但我正在努力让他们产生任何结果。我正在尝试遵循.enter()
, .update()
,.exit()
模式。
我想要完成的是让一系列数据消失。我希望当个人点击图例(选择/取消选择)时发生这种情况,但现在,为了方便 - 我将功能附加到按钮上。选择按钮后,所有绿条都会出现,所有蓝条都会消失。
让我感到困惑的部分是,这是一个成对的条形图。因此,事物被分组,并增加了一层额外的复杂性。
d3.select("#change").on("click", updateBars);
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 bars = svg.selectAll("sets")
.data(dataset);
bars.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);
})
.attr("fill", colors[0][1])
;
//Update
bars.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);
});
//Exit
bars.exit()
.transition()
.duration(500)
.attr("x", -xScale.rangeBand())
.remove();
}
我的完整代码也可以在我的 JSFiddle 上看到。