web-dev-qa-db-ja.com

NVD3 / D3はy軸の最小値を変更します

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

javascriptd3.jsnvd3.js
12
Siva

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

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

ほとんどのグラフには、値の配列をとるforceX関数とforceY関数があります。次のように使用できます。

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

これにより、xAxisで常に少なくとも0と10が表示されますが、ドメインを直接操作してもドメインが制限されることはありません。それはあなたが次のようなことをする場合です：

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

また、データには負のX値があり、指定されたドメインの外にあるためグラフには表示されませんが、forceXを使用すると表示されます。

29
WolfgangCodes

Chart.forceX（0）で設定できるのは最小値のみです。

1
Nick Vinogradskiy

このテストページは、nvd3チャートのプロパティを把握するときに非常に役立つと思います（angular btw）を使用していない場合でも適用可能）

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

  • [拡張]をクリックします
  • forceYの横にある+記号をクリックします
  • -5のような値を入力し、それを追加してすぐに効果を確認します（サンプルグラフにはすでにゼロが表示されています）。
1
Simon_Weaver