Пользовательские квантованные тики по оси

Question

Я создаю линейную диаграмму в d3js, которая рисует график вашего исполнения с течением времени. Это означает, что мои данные являются определенным результатом в определенный момент времени. Пример:

2011-01-01: 75 
2012-01-01: 83 
2013-01-01: 50 

Теперь я не хочу, чтобы отобразить счет как целые значения на моей Y-оси, но я хотел бы, чтобы отобразить целые значения в полезные слова. Пример:

a score between 50 and 70 means you've scored Excellent 
a score between 25 and 50 means you've scored Very Good 
etc. 

Какой самый лучший способ для этого?

Реализация моей оси следующим образом:

var y = d3.scale.linear().range([settings.height, 0]); 

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

y.domain(d3.extent(data, function(d) { return d.score; })); 

svg.append("g") 
    .attr("class", "y axis") 
    .call(yAxis) 
    .append("text") 
    .attr("x", (settings.width - 10)) 
    .attr("dy", ".71em") 
    .style("text-anchor", "end") 
    .text(settings.labels.y); 

Answer 1

Заканчивать d3.scale.quantize, который берет домен, похожий на линейный масштаб, но разрушает его до значений дискретного диапазона ровных кусков. Если даже размерные куски не будут работать для вас, d3.scale.threshold - аналогичная идея, за исключением того, что вы можете определить собственное сопоставление между подмножествами домена и значениями дискретного диапазона.

Answer 2

Вы можете указать свой собственный tickFormat. Например:

function scoreFormat(d) { 
    if (d <= 70 && d > 50) { 
     return "Good"; 
    } else if (d <= 50 && d > 25) { 
     return "Bad"; 
    } 
    return "Ugly"; 
} 

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