2

私はnv.models.lineWithFocusChartを使用しています。ここでは、1 時間ごとの測定値を表示しています。したがって、x ドメインは日付です。

私が必要とするのは、X 軸に 1 時間ごとのティックを表示することです。

00:00 01:00 02:00 ... 24:00

見つけることができるすべてを試しましたが、何も機能しません。値が日付でない場合、特定の目盛りを設定するのは簡単なようです。しかし、デートのためにそれを行う方法がわかりません。

役立つ場合は、グラフを作成するコードを次に示します。

 nv.addGraph ->
    chart = nv.models.lineWithFocusChart(view)
    chart.yAxis.tickFormat(d3.format(".02f"))

    d3.select(graphSelector).datum([]).transition().duration(500).call(chart)
    nv.utils.windowResize ->
      d3.select(graphSelector).call(chart)

    chart.xAxis.tickFormat (d) ->
      d3.time.format(ticksFormat)(new Date(d)) 
    chart.x2Axis.tickFormat (d) ->
      d3.time.format(ticksFormat)(new Date(d))

    chart.xAxis.tickSubdivide(9)
4

3 に答える 3

4

わかりました、これは本当に古いですが、この問題を抱えている他の人を助けるために答えます。

問題は、nvd3 フレームワークでは、 ticks() を何に設定しても、チャートが生成されるときに自動的に上書きされることです。lineWithFocusChart [nv.d3.js の開発バージョン、1.1.15b]内の次のコードを参照してください。

6526        xAxis
6527            .scale(x)
6528            .ticks( availableWidth / 100 ) // <-- this is the problem
6529            .tickSize(-availableHeight1, 0);

私の解決策は、nvd3 を少し編集することでした。xAxis が作成されるとき、ティック値は null です。そのため、デフォルト コード (上記) で上書きする前に、nvd3 で ticks が null かどうかを確認するだけです。これにより、上書きされない代替ティック関数を提供する機会が得られます。私の編集したバージョンは次のようになります。

6526        xAxis
6527            .scale(x)
6528            .tickSize(-availableHeight1, 0);
6529
6530        if (xAxis.ticks() == null) // <-- ignores default if you already set ticks()
6531            xAxis.ticks( availableWidth / 100 )

この変更を行った後、上記の @Lars Kotthoff によって提案されたコードを使用して、ティック形式を時間間隔に設定できます。

chart.xAxis.ticks(d3.time.hours);

もう 1 つ注意してください...まだ行っていない場合は...タイム スケールを使用するようにチャートで xScale を明示的に設定する必要があります。

chart.xScale(d3.time.scale());

この問題は、stackedAreaChart と lineChart およびおそらく他のグラフでも発生します。

于 2014-10-21T17:46:29.693 に答える
0

D3 は、特定の時間間隔を実行するための便利な機能を提供します (ドキュメントを参照してください)。あなたは簡単にできるはずです

chart.xAxis.ticks(d3.time.hours, 1)
于 2013-07-03T11:03:16.977 に答える