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 그룹 당 열 수 단지 지표입니다 내 코드입니다.

모든 도움에 감사드립니다. 이것에 대한 X 축 위치

Answer 1

초기화 y (즉 height)

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