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);