Блог

Главная - Вопросы по программированию - При использовании текстовых меток для тиков в линейном масштабе масштабирование приводит к тому, что метки выходят за пределы оси

При использовании текстовых меток для тиков в линейном масштабе масштабирование приводит к тому, что метки выходят за пределы оси

#javascript #d3.js #data-visualization #graph-visualization

#javascript #d3.js #визуализация данных #визуализация графика

Вопрос:

Я создал график d3 с линейным масштабом по оси x. Я разместил текстовую метку на xaxis с помощью tickFormat().

Когда я увеличиваю масштаб графика, значения тиков выходят за пределы оси x. Как мне сделать так, чтобы тики (с текстовыми метками) за пределами xaxis (svg rect) исчезли?

 var xAxis = d3.svg.axis().scale(x)
  .orient("bottom")
  .tickValues(idForXAxis)
  .tickFormat(function(d,i){ return valuesForXAxis[i] })

Скрипка: https://jsfiddle.net/wicedp/q1b2dsdt/4 /

Ответ №1:

Проблема здесь не tickFormat в этом . Вы можете легко найти виновника: удалите tickValues , и тики останутся в пределах диапазона.

Лучшая идея — просто позволить D3 генерировать тики. Но, если вы хотите отобразить все значения в valuesForXAxis массиве в исходном представлении и при этом иметь поведение масштабирования, форматирующее тики, есть обходной путь. Установите номер тика как количество значений внутри valuesForXAxis массива:

 xAxis.ticks(idForXAxis.length)

А затем внутри вашей zoomed функции:

 xAxis.ticks(idForXAxis.length/d3.event.scale);

Вот обновленная скрипка: https://jsfiddle.net/pfrdvLtx /

Комментарии:

1. Спасибо за ответ. Я использовал ваше предложение, и теперь значения остаются в пределах диапазона. Но он всегда показывает значения массива — «valuesForXAxis» от индекса 0 до «idForXAxis.length / d3.event.scale». Когда я добавляю линейный график и увеличиваю его, график и ось x не синхронизированы.

2. Вот что связано с этим изменением. jsfiddle.net/wicedp/c6m2wkms Вероятно, ему просто нужно смещение для начального индекса и конечного индекса массива «valuesForXAxis».

Ответ №2:

Я смог решить проблему, добавив этот фрагмент кода — 

 var clipX = svg.append("clipPath")
  .attr('id', 'clip-x-axis')
  .append('rect')
  .attr('x', -10)
  .attr('y', 0)
  .attr('width', width)
  .attr('height', margin.bottom);

svg.append("g")
.attr("class", "x axis")
.attr('clip-path', 'url(#clip-x-axis)')
.attr("transform", "translate(0, "   height   ")")
.call(xAxis)
.selectAll(".tick text")
  .call(wrap, 0);

Таким образом, я думаю, что xaxis правильно переводился и обрезался. Вот скрипка — https://jsfiddle.net/wicedp/q1b2dsdt/12 /