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

Я создал график d3 с линейным масштабом оси x. Я разместил текстовую метку на оси x с помощью 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/


javascript d3.js data-visualization graph-visualization
person Sriharsha Puranik    schedule 11.10.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

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

xAxis.ticks(idForXAxis.length)

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

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

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

person Gerardo Furtado    schedule 11.10.2016
comment
Спасибо за ответ. Я воспользовался вашим предложением, и теперь значения остаются в пределах допустимого. Но он всегда показывает значения массива - valuesForXAxis от индекса 0 до idForXAxis.length / d3.event.scale. Когда я добавляю линейный график и увеличиваю его, график и ось x не синхронизируются. - person Sriharsha Puranik; 12.10.2016
comment
Вот сценарий этого изменения. jsfiddle.net/wicedp/c6m2wkms Вероятно, потребуется просто смещение для начального и конечного индексов valuesForXAxis массив. - person Sriharsha Puranik; 12.10.2016

arrow_upward
0
arrow_downward

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

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/

person Sriharsha Puranik    schedule 15.10.2016