javascript - d3棒グラフが上下逆になっている

Question

d3で描かれた、縦棒付きの単純な棒グラフがあります：http: //jsfiddle.net/philgyford/LjxaV/2/

ただし、チャートの上部にベースラインが表示された状態で、バーが下に描画されています。

これを反転するには、下から上に向かっrange()て、y軸のを変更する必要があることを読みました。したがって、これを変更します。

    .range([0, chart.style('height')]);

これに：

    .range([chart.style('height'), 0]);

ただし、これはグラフの逆を描画しているように見えます。つまり、各バーの上のスペースに描画し、バー自体（下から描画）を透明のままにします。私は何が間違っているのですか？

Answer 1

d3基本棒グラフによる：http： //bl.ocks.org/mbostock/3885304

範囲を反転するのは正しいです。

さらに、長方形は次のように追加する必要があります。

    .attr('y', function(d) { return y(d.percent); } )
    .attr('height', function(d,i){ return height - y(d.percent); });

Answer 2

svg左上から開始するためのx座標とy座標。yを下から開始する必要があります。以下のコードは、次の行に沿っていくつかの関数を追加していることを前提としています。

svg.selectAll('rect')
    .data(dataset)
    .enter()
    .append('rect')

棒グラフを希望どおりに機能させるにはdata[i]、軸より上の距離から開始するようにy属性を設定します。

.attr('y', function(d) { return height - d; })

次に、距離data[i]を軸までの残りの部分まで延長する必要があります。

.attr('height', function(d) { return d; }) 

以上です！

Answer 3

y属性の設定は機能しているようです。

.attr('y', function(d){ return (height - parseInt(y(d.percent))); })

ここにjsfiddle