2013-06-12 23 views
8

現在、NVD3を使用していくつかの折れ線グラフを作成しています。 y軸を常に0から始めるようにすることが可能かどうか疑問に思っています。現在は常にyの値の小さいほうから始まります。私はtickValuesを使用しようとしましたが、私は他の値を変更したくありません。また、値0のデータポイントを追加しようとしましたが、これは回避策のように思われ、グラフの見た目に影響します。何か案は?NVD3/D3はy軸の最小値を変更します

答えて

9

"ダミー"データポイントを追加する必要はありません。必要なのは、スケールの入力ドメインを調整することだけです。

chart.yAxis.scale().domain([0, maxValue]); 
+0

申し訳ありません、よろしくお願いいたします。 – Siva

+0

プロットに表示されるグラフの 'maxValue'を得る方法はありますか?私はnvd3 boxplotを使用していて、異常値を表示していません。だから私はその上限値としてチャートによって計算されたその最大値を使用したいと思います。 – Dinesh

+0

データから最大値を得ることができます。 –

28

ほとんどのチャートには、値の配列をとるforceXおよびforceY関数があります。あなたは常に、少なくとも0と10を示しているあなたのx軸上の点を確認します

var chart = nv.models.lineChart(); 
    chart.forceX([0, 10]) 
    chart.forceY([-1, 1]) 

を、しかし、あなたはそれを直接操作する場合は、ドメインを制限しません:あなたはこのようにそれを使用することができます。

chart.yAxis.scale().domain([0, maxValue]); 

とあなたのデータあなたがFORCEXを使用している場合、彼らは指定されたドメインの外に落ちますので、あなたのチャートに表示されません負のX値を持っていますが、彼らは以下となります。それはあなたのような何かをする場合です。

+0

スケールを設定しようとしていますが、動作しません。たとえば、chart.y1Axis.scale()。domain([0、maxValue]) .tickFormat(d3.format( '、f')); – Acyra

+1

update()を呼び出すと、直接設定した値が破損している可能性があります。 – WolfgangCodes

+25

答えに少し追加:yAxisの最小値のみを設定したかったので、最大値を自動的に設定する必要があります。私は、あなたが[min、max]設定の配列の代わりに単一の値でforceYを呼び出すと、nvd3が最小値としてこの値を設定し、それ自身で最大値を計算することが分かりました。 TL; DR - >最小yAxis値を0に設定し、最大値をnvd3で計算するにはforceY(0)を使用してください。 – Fidel90

1

私はnvd3チャートのプロパティを考え出すとき(あなたがところで、角使っていない場合でも適用されます)非常に有用であることが、このテストページを見つける

https://krispo.github.io/angular-nvd3/#/lineChart

  • をクリックして
  • を「拡張」 forceY
  • -5のような値を入力し、それを追加してすぐにエフェクトを表示します(サンプルグラフにはすでにゼロが表示されています)。
+1

これはマルチチャートでは機能しません。壁に向かって頭を叩いて、私がその実現を得る前になぜこれが私のグラフではうまくいかないのか理解しようとしました。 –

関連する問題