9

私はd3.format（ "s"）とd3.svg.axis.tickFormatを使用して、ティックラベルを（国際単位系の）SI単位で適切にフォーマットしています。丸め誤差が発生し、小数点以下1トンを返す特定の値（たとえば、1400 * 0.001 = 1.4000000000000001）を除いて、ほとんどの部分で美しく機能します。

これを回避するために、d3.format（ "。2s"）などの精度を指定できますが、1の方が適切な場合は、有効数字2桁が強制されます。たとえば、ティック[5000、10000、15000]がある場合、[5.0k、10k、15k]が表示されます。もともと精度を全く指定しなかったときは[5k、10k、15k]になりました。

有効桁数が指定数を超えた場合にのみ適用されるように、最大​​精度を指定できるのではないかと思います。したがって、5000は5.0kではなく5kになります。

4

2 に答える 2

3

1400 * .001 は 1.4000000000000001 ですが、1400 / 1000 は 1.4 です。整数に 10 の負の累乗 (.001 など) を掛けると、丸め誤差が発生する可能性がありますが、整数を 10 の累乗 (1000 など) で除算すると発生しないようです。または、少なくとも、可能性は低いですか？fix-si-format-rounding ブランチに暫定的な修正を実装しました。厳密には下位互換性がありませんが、このd3.formatPrefix機能は文書化されていないため、次のパッチ リリースに含めても安全だと思います。

編集: この修正はバージョン 2.9.2 でリリースされました。

于 2012-04-26T05:27:23.113 に答える
2

これを行うには、テキスト文字列を出力する無名関数に if/else ステートメントを配置します。その if/else 内で、必要な条件を満たし、 value を解析する関数を作成できます。次に例を示します。

var w = 30, h = 300;
var data = [
  {'point':1, 'value':100.005},
  {'point':2, 'value':20.010},
  {'point':3, 'value':1000},
  {'point':4, 'value':5000.099},
  {'point':5, 'value':6000.934},
  {'point':6, 'value':9000.888},
  {'point':7, 'value':500.22},
  {'point':8, 'value':5.123},
  {'point':9, 'value':50.022},
  {'point':10, 'value':7000.999}
];
var chart = d3.select("body").append("svg")
  .attr('class', 'chart')
  .attr("width", w * data.length - 1)
  .attr("height", h);

chart.selectAll('text')
  .data(data)
.enter().append('text')
  .attr('x', function(d, i) { return x(i); })
  .attr('y', function(d) { return h - y(d.value); })
  .attr('dx', '0.75em')
  .attr('dy', '-0.3em')
  .attr('text-anchor', 'start')
  .text(function(d) { 
    if(d.value > 5000) {
      // Define your formatting function to return SI units
      var si = d3.format('s');
      return String(si(d.value));
    } else {
      // Otherwise round to the nearest integer
      return String(d3.round(d.value, 0));
    }
  });

それが役立つことを願っています。

于 2012-04-25T23:32:52.890 に答える