Click here to Skip to main content
15,075,638 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I'm trying to create a step slider in d3 (v5) with the years 2000 through 2021. (Using plugin d3-simple-slider)

JavaScript
const slider =
sliderBottom()
.min(new Date(2000, 1, 1))
.max(new Date(2020, 1, 1))
.tickFormat(d3.timeFormat('%Y'))
.tickValues(ar)
.default(new Date(2000, 10, 3))
.width(rectWidth - margin.right - 65)
.height(75)
.on("onchange", (value) => {
  year = d3.timeFormat('%Y')(value);
})



JavaScript
const g = d3
  .select("#slider")
  .append('svg')
  .attr('width', rectWidth - margin.right - 65)
  .attr('height', 75)
  .append('g')
  .attr('transform', 'translate(20,20)')



The slider that is displayed however seems to enable the area in between the "steps" and the year also seems to move along.

1) Is there a way to have only the exact points at the steps enabled?
2) How to make the slider responsive ?

Thanks in advance!

What I have tried:

Tried adding
.step(1000 * 60 * 60 * 24 * 365)
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900