3

単純なd3棒グラフがあり、背景に水平線を描画しようとしています。

グラフのバーはパーセンテージを表し、フルハイトのバーは100％です。25％、50％、75％、100％のレベルで4本のバーを表示したいと思います。しかし、私がこれを行う場合：

svg.selectAll('.rule')
    .data(y.ticks(4))
.enter().append('line')
    .attr('class', 'rule')
    .attr('x1', 0)
    .attr('x2', width)
    .attr('y1', y)
    .attr('y2', y);

次に、y.ticks(4)5行を表示します。に変更すると32行になります。に変更して5も、5行になります。これがJSFiddleの例です。

また、そのスクリプトの最後にy軸を追加しようとしましたが、水平方向にしか表示されません。垂直方向に表示するにはどうすればよいですか？これは、私が見たすべての例でうまく機能しているようです。

4

1 に答える 1

5

のticks()メソッドのパラメーターd3.scale.linear()は単なるヒントです。メソッドはこれを近似値として使用しますが、「きれいな」値を選択します。(こちらをご覧ください: https://github.com/mbostock/d3/wiki/Quantitative-Scales#wiki-linear_ticks )

値を明示的に設定する場合は、インスタンス化しd3.svg.axis()て使用する必要がありますaxis.tickValues()(さらに下で行ったように)。

2番目の質問について。軸には、水平方向の X 軸として使用するための既定の方向 (表示されている方向) があります。.orient("left")呼び出すか.orient("right")、垂直軸を取得する必要があります。「左」方向を使用すると、実際には軸が表示されないことに注意してください.bcの数値はSVGの左端からはみ出し、切り取られます。そのため、SVG にパディングを追加し、その中のすべてのグラフィックを移動することは、一般的には良い考えです。「右」方向を使用すると数値が表示されますが、通常、この場合は軸をグラフの右側に変換します。

于 2013-02-25T18:22:03.707 に答える