web-dev-qa-db-ja.com

d3.js＆nvd3.js軸とラベルの精度のフォーマット

この例にあるような積み上げ面グラフの使用 http://nvd3.com/ghpages/stackedArea.html

Y軸の目盛りラベルとツールチップラベルを浮動小数点数ではなく整数にフォーマットしようとしています。次のコードを変更しようとしました

chart.yAxis
        .axisLabel('Users')
        .tickFormat(d3.format(',.2f'));

に

chart.yAxis
        .axisLabel('Users')
        .tickFormat(d3.format(',.0d'));

精度は変わりません（100分の1の位まで値が表示されます）。私はGithub Wikiをフォローしましたが役に立ちません https://github.com/mbostock/d3/wiki/Formatting#wiki-d3_format

提案やヒントは大歓迎です。

d3.jsnvd3.js
18
Viet

これはnvd3ではサポートされていません のように見えます。問題のある line を参照してください。

さらに、形式の指定が正しくありません。ドキュメントで述べたように、"d"は非整数値を無視します。したがって、おそらく",.0f"代わりに、つまり：

  • ,：カンマを使用して数千を区切ります。
  • .0：ゼロの精度（これの正確な意味は、どのtypeが使用されているかによって異なります）。
  • f：タイプ;この場合、 Number.toFixed です。つまり、固定桁数（precision）が小数点の後に表示され、必要に応じて丸められます。
24
Jason Davies

これは、ラベルテキストを浮動小数点から整数にフォーマットできます。

円グラフの場合：

chart.pie.valueFormat(d3.format(',.0d'));

折れ線グラフの場合：

chart.yAxisTickFormat(d3.format(',.0d'));
4
kevin

.tickFormatメソッド.yAxisメソッドはそれを適切に更新しません。これは私が使用した回避策です：

        chart.yAxisTickFormat(d3.format(',.0d'));
3
mearing

私はこのようにしてみました

.axisLabel('%').tickFormat(function(d) { return parseFloat(d).toFixed(1) + "%"; });

それは私のために働いています。私は小数点とパーセンテージで結果を得ています。

3
Dijo