D3.js 누적 가로 막 대형 차트 부정적인 방향으로 증가

Question

D3 및 javascripts를 처음 사용합니다. 애니메이션 세로 형 막대 차트를 만들려고합니다. 가로 누적 막 대형 차트의 예는 here입니다. 조정 후 수직으로 쌓인 막 대형 차트가 아래쪽으로 늘어납니다. 여기에 my edited fiddle입니다.

업데이트 : 아래에서 제안하는 것을 포함, 여러 가지 비틀기를 한 후,이 마지막으로 작동합니다 final working upward growing stacked bar chart 나는이 코드 청크 내에 있어야 변경해야 할 장소 (들)을 느낄

rects = groups.selectAll('.stackedBar') 
     .data(function(d,i) {console.log("data", d,i); return d; }) 
     .enter() 
     .append('rect').attr('class','stackedBar') 
     .attr('y', function(d) { return yScale(d.y0); }) 
     .attr('x', function(d, i) {return xScale(d.x); }) 
     .attr('height',0) 
     .attr('width', xScale.rangeBand()); 

     console.log(document.querySelectorAll(".stacked")); 
     var abc=document.querySelectorAll(".stackedBar"); 

    rects 
     .transition() 
     .delay(function(d,i,j){console.log("pre",j); return j*500;}) 
     .attr("y", function(d) { return yScale(d.y0); }) 
     .attr("height", function(d) { return yScale(d.y); }) 
     .duration(1000); 

그러나 나는 주위를 검색하고 y의 초기 위치 인 yScale 범위를 되돌리려 고 시도했지만 그 중 아무 것도 작동하지 않았습니다. 나는 또한 내 yAxis가 항상 내 X 축 아래에 있다는 사실을 알았습니다.

Answer 1

첫째로 당신은 당신의 Y-규모의 방향을 변경해야합니다. SVG에서 최고 높이 = 0 그래서 당신의 SVG의 바닥이 "높이를"동일 있습니다

svg.append('g') 
    .attr('class', 'axis') 
    .call(xAxis) 
    .attr("transform", "translate(0," + height + ")"); 

마지막으로, 당신처럼 누적 막대 그래프의 건물 방향을 변경해야합니다 :

rects 
    .transition() 
    .delay(function(d,i,j){console.log("pre",j); return j*500;}) 
    .attr("y", function(d) { return yScale(d.y + d.y0); }) 
    .attr("height", function (d) { return yScale(d.y0) - yScale(d.y + d.y0); }) 
    .duration(1000); 

여기에 업데이트 된 fiddle이 있습니다.

Answer 2

SVG는 왼쪽 상단부터 시작하므로 '높이'는 페이지 아래의 높이를 의미하므로 일부는 예상했던 것과 반대로 작동합니다.

먼저 y 축척으로 시작하십시오. 범위는 (0, 높이)가 아닌 역순 (높이, 0)으로 매핑해야합니다.

yScale = d3.scale.linear().domain([0,yMax]).range([height,0]),1 

마찬가지로 x 축은 '높이'에서 시작하도록 변형되어야합니다.

yScale = d3.scale.linear().domain([0,yMax]).range([height,0]) 

그리고 그것은 "높이"에서 시작되도록 x 축이뿐만 아니라 변형해야합니다

 svg.append('g') 
     .attr('class', 'axis') 
     .call(xAxis) 
     .attr("transform", "translate(0," + height + ")");'