D3の棒グラフは、私が垂直バーで、D3に描かれたシンプルな棒グラフを持って逆さま

。

これを逆にすることを読んだところ、下から上に向かって、range()をy軸に変更する必要があります。それは、チャートの逆を図面のように見えること、しかし

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

からバーのそれぞれ上の空間に描画し、残して：これまで

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

：だから、これを変更下から引かれたバー自体は透明です。私は間違って何をしていますか？ yの属性を設定

あなたは範囲を反転して正しいです。

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

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

2013-02-21 21:15:06 cmonkey

偉大な、感謝のcmonkey。私はこの棒グラフの例も見ていなかったので、それは便利です。 –

本当に良い解決策！ – Kamil

が動作しているようです：

D3基本的な棒グラフパー

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

2013-02-21 21:14:26

マイクさん、ありがとうございます。でも、チャートを反転するのではなく、バーを移動するだけで、後でy軸マークを表示すると問題が発生する可能性があります。 –

x、y座標を左上にあるsvgスタートのために。あなたは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; })

それだけです！

2017-08-08 05:10:20

答えて