d3條形圖轉換y軸顛倒

Question

我是新的d3，我正在嘗試繪製動畫條形圖（在此之後example）。我能夠生成圖表，但是我面臨的問題是運動是顛倒的（從酒吧的高度開始向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只是每組的列的數目的指示符。

感謝您的幫助。

Answer 1

初始化y於x軸位置（即height）爲這樣：

control.selectAll("rect") 
    .data(function(d) { return d.category; }) 
    .enter().append("rect") 
    .attr("height", 0) 
    .attr("y", height);