18

私はd3.jsチャートを使用してy軸とx軸をプロットしています。正常に動作していますが、範囲と言うことができるy軸の値は0から10000であり
、数値が1000より大きい場合は、Kが付属します。数値が1000の場合は、1Kが表示され、15000の場合は表示されます。 y軸で15Kを刻みます。

どうやってするか？y.domain文字列値の関数を操作および範囲指定できません。

var y = d3.scale.linear().range([ height, 0 ]);
y.domain([
  0,
  d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.count; }); })
]);
4

6 に答える 6

37

APIリファレンスから、d3.formatPrefix

var prefix = d3.formatPrefix(1.21e9);
console.log(prefix.symbol); // "G"
console.log(prefix.scale(1.21e9)); // 1.21

このように使用できます

var yAxis = d3.svg.axis()
    .scale(y)
    .ticks(5)
    .tickFormat(function (d) {
        var prefix = d3.formatPrefix(d);
        return prefix.scale(d) + prefix.symbol;
    })
    .orient("left");

ただし、これがまさにあなたの言いたいことである場合は、d3.format("s")

var yAxis = d3.svg.axis()
    .scale(y)
    .ticks(5)
    .tickFormat(d3.format("s"))
    .orient("left");
于 2013-03-19T13:30:47.707 に答える
9

tickFormatあなたは軸オブジェクトで探しています。

var svgContainer = d3.select("body").append("svg")
    .attr("width", 800)
    .attr("height", 100);

//Create the Scale we will use for the Axis
var axisScale = d3.scale.linear()
    .domain([0, 2000])
    .range([0, 600]);

//Create the Axis
var xAxis = d3.svg.axis()
    .scale(axisScale)
    .tickFormat(function (d) {
      if ((d / 1000) >= 1) {
        d = d / 1000 + "K";
      }
      return d;
    });

var xAxisGroup = svgContainer.append("g")
    .call(xAxis);

ここで確認してください：http：//jsfiddle.net/3CmV6/2/

これはあなたが望むものをあなたに与えるでしょう、しかし私は使用するためにrobermoralesからの提案をチェックすることをお勧めしますd3.format('s')。

于 2013-03-19T08:28:18.447 に答える
7

これは私が実装したものです

var yAxis = d3.svg.axis().scale(y).ticks(5).
tickFormat(function (d) {
    var array = ['','k','M','G','T','P'];
    var i=0;
    while (d > 1000)
    {
        i++;
        d = d/1000;
    }

    d = d+' '+array[i];

    return d;}).
orient("left");

それは1000以上でも機能します...

于 2013-03-19T11:03:32.453 に答える
1

簡潔なアプローチ：

var myTickFormat = function (d) {//Logic to reduce big numbers
  var limits = [1000000000000000, 1000000000000, 1000000000, 1000000, 1000];
  var shorteners = ['Q','T','B','M','K'];
  for(var i in limits) {
    if(d > limits[i]) {
      return (d/limits[i]).toFixed() + shorteners[i];
    }
  }
  return d;
};

spenderRowChart
    .xAxis().ticks(3)
    .tickFormat(myTickFormat);

1Kこれは、に対して1000、1Mに対して、というように戻ります1,000,000。
注：クアッドリリオンを超える場合は、Number.MAX_SAFE_INTEGERを実行することをお勧めします。

于 2018-08-14T13:43:17.697 に答える
1

これを試して

      axis: {
                y: {
                    tick: {
                        format: d3.format("$.2s")
                    }
                }
            }
于 2018-08-22T08:54:15.713 に答える
0

目盛りのラベルを編集したい場合は、tickFormat関数を使用できます。

たとえば、y軸関数は次のようになります。

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(function(tickVal) {
        return tickVal >= 1000 ? tickVal/1000 + "K" : tickVal;
    });

次に、それを呼び出す必要があります。svgチャートを参照するsvgという変数があると仮定します。

svg.append("g)
    .call(yAxis);

少しわかりやすくするために、このチュートリアルに基づいてこのjsfiddleを作成しました。値が1000以上の場合、上記の方法で軸ティックラベルを表示するように調整されています。数回実行すると、次のように表示されます。さまざまな軸の値がどのように処理されるか。

于 2013-03-19T08:53:06.753 に答える