Konwersja liczb na osi Y na łańcuch z K na tysiąc d3.js

Question

Używam wykresów d3.js do wykreślania osi y i osi x .. działa dobrze ... ale wartości w osi y można powiedzieć, że zakres jest powiedz 0 do 10000 i chcę, jeśli liczba jest większa niż tysiąc przyjdzie z K powiedzieć , jeśli liczba jest 1000, pokaże 1K, dla 15000 wyświetli na osi Y tyknięcia 15K

jak to zrobić. . nie jestem w stanie manupulate funkcje y.domain i zakres dla wartości ciągów ...

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; }); }) 
           ]); 

jak to zrobić, czy jest jakiś sposób, żeby zrobić ... proszę o pomoc

Answer 1

Od API Reference widzimy d3.formatPrefix

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

Możemy wykorzystać to w ten sposób

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

Jednakże w przypadku, to jest dokładnie to, co masz na myśli, możemy uprościć stosując d3.format("s")

var yAxis = d3.svg.axis() 
    .scale(y) 
    .ticks(5) 
    .tickFormat(d3.format("s")) 
    .orient("left"); 

Answer 2

Poszukujesz tickFormat na obiekcie osi.

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

Sprawdź to tutaj: http://jsfiddle.net/3CmV6/2/

To da Ci to, co chcesz, ale ja polecam sprawdzenie sugestię robermorales używać d3.format('s').

Answer 3

Jeśli chcesz edytować etykiety na kleszczach, możesz użyć funkcji tickFormat.

Na przykład, funkcja oś y będzie wyglądać mniej więcej tak:

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

Wtedy po prostu trzeba to nazwać. Zakładając, że mamy zmienną o nazwie SVG odwołujący wykres SVG:

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

Żeby było trochę jaśniej Utworzyłem this jsfiddle podstawie this tutorial, przystosowany do wyświetlania osi etykiety zaznaczyć w sposób opisany powyżej, jeżeli wartość jest większa lub równa 1000. Jeśli uruchomisz go kilka razy, zobaczysz, jak obsługiwane są różne wartości osi.

Answer 4

To właśnie realizowany

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

będzie pracować dla nawet więcej niż tysiąc ...