[英]d3 bar chart transition y-axis upside down
我是d3中的新手,我正在嘗試繪制動畫條形圖(按照此示例 )。 我能夠生成圖表,但我面臨的問題是運動是顛倒的(從條的高度開始將條形建立在x軸上)。 我希望運動從x軸開始然后上升!
這是我的代碼
var y0 = d3.scale.linear().range([height, 0]);
var y1 = d3.scale.linear().range([height, 0]);
..
..
control.selectAll("rect")
.data(function(d) { return d.category; })
.enter().append("rect")
.attr("width", x1.rangeBand())
.attr("x", function(d) { return x1(d.name); })
.attr("height", 0)
.attr("y", function(d, i) { if(columnNum == 2 && i == 2) return y1(d.value); else return y0(d.value); })
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
.style("fill", function(d) { return color(d.name); });
control.selectAll("rect")
.transition()
.delay(function(d, i) { return i * 100; })
.duration(1000)
.attr("height", function(d, i) { if(columnNum == 2 && i == 2) return y1(d.value); else return y0(d.value); })
.attr("y", function(d, i) { if(columnNum == 2 && i == 2) return height - y1(d.value); else return height - y0(d.value); });
columnNum只是每組列數的指示符。
謝謝你的幫助。
將y
初始化為x軸位置(即height
):
control.selectAll("rect")
.data(function(d) { return d.category; })
.enter().append("rect")
.attr("height", 0)
.attr("y", height);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.