3

私は d3.js を使用して、ネットワーク トラフィックに関する情報を効果的に表示しています。視覚化のある時点で、y 軸を使用してバイト数を表示しています。

私は現在、d3.svg.axis().ticks() システムを使用しています。これにより、20000 のような適切な数値が得られます。ただし、kB/MB/etc に変換すると、結果は 19.5 や 9.8 のような厄介な数値になります。(10^c) の倍数ではなく、1024、1048576 などのように (2^(10*c)) の倍数でティックを戻す方法はありますか?

その他の情報/考え:

  • svg.axis がペイントの基本を処理してくれることに感謝しており、この機能を置き換えない解決策を見つけたいと考えています。
  • 私は、@mbostock と会社の協力が得られる限り、d3 を変更してプル リクエストを送信することにオープンです。
  • d3_scale_linearTickRange() 内およびその周辺のコードに焦点を当ててリポジトリをチェックアウトしましたが、他の軸に必要なデフォルトの機能を変更せずに目標を達成する簡単な方法がわかりません。
  • 以下に投稿された考えられる回避策が 1 つありますが、それは不正に近いものです。
4

2 に答える 2

2

ここに記載されているように、ティック値を手動で処理できます: https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-tickValues

var xAxis = d3.svg.axis()
    .scale(x)
    .tickValues([1, 2, 3, 5, 8, 13, 21]);

また、書式設定のヘルプとして tickFormat を使用できます。つまり、精度と SI 接頭辞を修正できます。https://github.com/mbostock/d3/wiki/Formatting#wiki-d3_format

于 2012-08-23T05:00:59.930 に答える
1

1 つの回避策は、最終結果を得るために、1024 ではなく 1000 で割って、ラベルのキロとメガを誤った方法で使用することです。

Instead of:
20000 B / 1024 = 19.5 kB     :(

Stretch the truth with:
20000 B / 1000 = 20 kB       :)

これは、故意にエラーを導入するという点で、一見容認できないように見えますが、「ほんの数ピクセル」ずれていると確信できれば、d3自体に手術を行わないためにそれを選択するかもしれません.

もっと良い方法があると確信しています。

于 2012-05-08T13:19:57.053 に答える