Нерегулярный слайдер в D3

Question

Я пытаюсь построить слайдер в D3. Я нашел библиотеку для этого https://github.com/johnwalley/d3-simple-slider, которая идеально подходит для обычного слайдера.

Однако мне нужно шаг за шагом скользить между нерегулярно расположенными датами: например, [2002,2005,2012,2029].

Нужно ли создавать слайдер самостоятельно? Или ты знаешь другой путь?

Спасибо,

Answer 1

Плагин, который вы выбрали, может работать. Смотрите пример ниже. Вам нужно добавить некоторые настройки.

<script src="https://d3js.org/d3.v5.js"></script>
<script src="https://unpkg.com/d3-simple-slider"></script>

<p id="value"></p>
<div id="slider"></div>

<script>

  var data = [2002,2005,2012,2029];
  var slider = d3
    .sliderHorizontal()
    .min(d3.min(data))
    .max(d3.max(data))
    .width(500)
    .displayValue(false)
    .on('onchange', val => {
      d3.select('#value').text(val);
    });
    
    slider.tickValues(data)
          .marks(data);

  d3.select('#slider')
    .append('svg')
    .attr('width', 600)
    .attr('height', 100)
    .append('g')
    .attr('transform', 'translate(30,30)')
    .call(slider);
</script>