web-dev-qa-db-ja.com

d3.js＆nvd3.js-y軸の範囲を設定する方法

チャートのy軸の範囲を1〜100に設定しようとしています。

APIドキュメントを参照し、こちらにあるようにaxis.tickValuesで解決策を見つけました https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-tickValues

ただし、このオプションを使用しても機能しません。上記のaxis.tickSizeの下にリンクされているドキュメントページをさらに読むと、次の行が見つかりました

終了ティックは、関連するスケールのドメイン範囲によって決定され、ティックラインではなく、生成されたパスドメインの一部です。

そのため、範囲の最小値と最大値を設定することは、軸オプションでは行えません。

範囲を指定できる場所に関するアイデアはありますか？

javascriptd3.jsnvd3.js
54
Viet

ソリューションを見つけました。

.forceY([0,100])をチャートのインスタンス化に追加すると、軸は配列で指定された範囲を強制的に取得します。

ここの例から http://nvd3.org/livecode/#codemirrorNav

.forceY([0,100])をチャート変数に追加すると機能します。

78
Viet

名前が示すように、これは配列の値をyドメインに追加し、yドメインを_[0,100]_に設定しません。したがって、これを_[0,100]_に設定し、データのドメインが_-10_から_110_である場合、ドメインは_[-10,110]_になります。

ドメインが_[0,100]_になりたい場合、データが大きくてもchart.yDomain([0,100])を使用できます...しかし、通常はドメインまたはデータを含める必要があるため、チャートを使用することを強くお勧めします_chart.yDomain_の代わりの.forceY。ご覧のとおり、forceYの最も一般的な使用法の1つは、forceY([0])であり、常にドメイン内で0にします。

関数が実際に何をしているかを理解するのに役立つことを願っています、arboc7、これはデータセットよりも範囲を小さくするのになぜ機能しないのかを説明するはずです。

32
Bob Monteverde

積み上げ面グラフの場合、.forceY([0,100])は機能しません。代わりに.yDomain([0,100])を使用してください

10
Pierre-Yves V.

y-domain（表示される数値の範囲）積み上げ面グラフの場合、これは私にとってはうまくいきます：

nv.models.stackedAreaChart()
  .x(function(d) {...})
  .y(function(d) {...})
  .yDomain([0, maxY])
...
7
sepans

同様の問題があり、yAxisのyScaleでドメインを明示的に定義することで解決しました。

var yscale = d3.scale.linear()
                     .domain([0,100])
                     .range([250, 0]);
var yAxis = d3.svg.axis()
                  .scale(yscale);
0
myrcutio

私は次のように試しました：

chart.forceY([DataMin, DataMax]);

DataminとDatamaxは配列から計算する必要があります。また、フィルターが適用されるときに軸のポイントを動的に調整するために、フィルターのカスタムハンドルクリックイベントが必要です：

$('g.nv-series').click(function() {
   //Calculate DataMin, DataMax from the data array                    
   chart.forceY([DataMin, DataMax]);                        
});

したがって、グラフはフィルターが適用されるたびに調整されます。

0
Dijo