Irregular Slider In D3

10 April 2020 - 1 answer

I'm trying to build a slider in D3. I found a library for this https://github.com/johnwalley/d3-simple-slider which is perfect for the regular slider.

However, I need to slide by steps among irregularly spaced dates : [2002,2005,2012,2029] for example.

Do I need to build the slider by myself? Or do you know any other way?

Thank you,

Answer

The plugin you have chosen can work. See the example below. You need to add some customization.

<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>

source: stackoverflow.com

← Previous Post

Irregular Slider In D3

10 April 2020 - 1 answer

Answer

Related Questions