Обрезать длинные названия месяцев на оси времени

Question

Я пытаюсь понять, как менять форматирование в течение нескольких месяцев при рисовании оси с диапазоном данных scaleTime.

Я смог управлять макетом, как и ожидалось, но я бы хотел полные названия месяцев, которые нужно обрезать. См. Пример ниже - я бы хотел, чтобы «февраль» был «февралем». Другие даты подходят.

введите описание изображения здесь

Сводка моего кода оси:

  const x = scaleTime()
    .domain(dateExtent)
    .rangeRound([marginSize.left, width - marginSize.right]);

  const xAxis = axisBottom(x)
    .ticks(timeDay.every(2))
    .tickSizeOuter(0);

Есть ли способ предоставить форматирование для этих значений даты?

Answer 1

Самая простая и быстрая альтернатива - просто использовать tickFormat с указателем, который вы хотите, поэтому все отметки будут иметь одинаковую структуру.

Однако, если вы хотите изменить только граничные отметки (для формата который не совпадает с соседними, как вы описали), вы можете получить отметки после того, как генератор осей создал их, и проверить их значение.

Например, ось с февраль , как ваш:

const svg = d3.select("svg");
const scale = d3.scaleTime()
  .range([20, 580])
  .domain([new Date("January 20, 2020"), new Date("February 10, 2020")]);
const axis = d3.axisBottom(scale)(svg.append("g").attr("transform", "translate(0,50)"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="500" height="100"></svg>

Получаем галочки и проверяем, соответствует ли текст нужному спецификатору, иначе меняем:

d3.selectAll(".tick text").each(function(d) {
  if (this.textContent !== d3.timeFormat("%a %d")(d)) this.textContent = d3.timeFormat("%b")(d);
});

Вот результат :

const svg = d3.select("svg");
const scale = d3.scaleTime()
  .range([20, 580])
  .domain([new Date("January 20, 2020"), new Date("February 10, 2020")]);
const axis = d3.axisBottom(scale)(svg.append("g").attr("transform", "translate(0,50)"));

d3.selectAll(".tick text").each(function(d) {
  if (this.textContent !== d3.timeFormat("%a %d")(d)) this.textContent = d3.timeFormat("%b")(d);
});

svg.append("ellipse")
  .attr("cx", 342)
  .attr("cy", 63)
  .attr("rx", 20)
  .attr("ry", 8)

ellipse {
  fill: none;
  stroke: red;
  stroke-width: 2;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="500" height="100"></svg>