Как изменить значения тика, генерируемые линейной шкалой в графике линии d3.js?

Ответ 1

Тик-метки, созданные осью d3, можно управлять двумя способами:

• Используя axis.tickValues(arrayOfValues), вы можете явно установить значения, которые вы хотите отобразить на оси. Тики располагаются путем передачи каждого значения в соответствующий масштаб, поэтому значения должны находиться в пределах вашего домена масштабирования. Это работает для любого типа шкалы, включая порядковые шкалы, до тех пор, пока значения, которые вы даете, соответствуют этой шкале.

• В качестве альтернативы, используя axis.ticks(parameters), вы можете изменить способ масштабирования меток. Типы параметров, которые вы можете использовать, зависят от типа используемого вами масштаба - указанные вами значения будут переданы непосредственно в метод шкалы .ticks(), поэтому проверьте документацию для каждого типа шкалы. (Параметры будут игнорироваться для порядковых масштабов, которые не имеют метода ticks().)

  Для линейных масштабов метод scale.ticks() принимает число в качестве параметра; масштаб затем генерирует приблизительно столько тиков, равномерно расположенных в пределах области с округленными значениями числа. Если вы не укажете количество тиков, по умолчанию будет создано приблизительно 10 тиков, поэтому вы получаете тики на 0,5 интервала, когда ваш домен был от 0 до 5.

Итак, как вы получаете нужное поведение (без значений десятичного тика)?

• Используя .tickValues(), вы создадите массив уникальных значений Y для ваших тиков:

  var yValues = data.map(function(d){return d.y;}); 
           //array of all y-values
  yValues = d3.set(yValues).values(); 
           //use a d3.set to eliminate duplicate values
  yAxis.tickValues( yValues );
  

  Помните, что этот подход будет использовать указанные значения y, даже если они не равномерно распределены. Это может быть полезно (некоторые книги визуализации данных предлагают использовать этот подход как простой способ аннотировать ваш график), но некоторые люди могут подумать, что ваш график выглядит грязным или сломанным.

• Используя .ticks(), вы должны выяснить объем вашего домена Y и установить количество тиков, чтобы у вас не было больше меток, тогда у вас есть целые числа, доступные в вашем домене:

  var yDomain = yScale.domain(); 
  yAxis.ticks( Math.min(10, (yDomain[1] - yDomain[0]) );
  

  Это создаст отметки по умолчанию (приблизительно 10) для широких доменов, но создаст по одному тику на целое значение, если разница между максимальным и минимальным значениями вашего домена меньше 10. (Хотя количество тиков обычно приблизительное, шкала всегда будет предпочитать целочисленные значения, если это соответствует указанному счету.)