D3.js積み重ね棒グラフが負の方向に拡大

Question

D3とjavascriptを初めて使用しています。私はアニメーション垂直スタックバーチャートを構築しようとしています。水平積み棒グラフの例として、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スケールの向きを変更する必要があります。

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

そして、それは「高さ」でスタートして、x軸も同様に変換する必要があります。トップはので、あなたのSVGの底が「高」に等しい高さ= 0を持っているSVGで：

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

：

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

なく、少なくとも最後に、あなたは次のようにあなたの積み上げ棒グラフの建物の向きを変更する必要があります

ここに更新されたfiddleがあります。

Answer 2

SVGは左上隅から始まるので、「高さ」はページの高さを意味するため、いくつかのことは期待どおりに機能します。

まず、yスケールから始めます。範囲を（0、高さ）ではなく逆順（高さ、0）にマッピングする必要があります。

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

同様に、x軸は「高さ」で開始するように変換する必要があります。

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