Преобразование чисел по оси y в строку с K для тысяч d3.js

Я использую диаграммы d3.js для построения оси y и оси x.. ее рабочий тон... но значения по оси y вы можете сказать, что диапазон имеет значение от 0 до 10000, и я хочу, если число больше тысячи он придет с K say если число равно 1000, оно будет показывать 1K, для 15000 оно будет показывать по оси y тики 15K

как это сделать.. Я не могу manupulate функции y.domain и range для строковых значений...

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

как это сделать, есть ли способ сделать... пожалуйста, помогите

Ответы

Ответ 1

Из Справочник 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");

Ответ 2

Вы ищете 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').

Ответ 3

Это то, что я реализовал

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");

он будет работать даже более тысячи...

Ответ 4

Если вы хотите отредактировать метки на тиках, вы можете использовать функцию 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. Если вы запустите его несколько раз, вы увидите, как обрабатываются различные значения осей.