I have an ASP.NET application in which I'm using D3.js.
I have a time slider that I can display on my web page and I want to increment it month by month.
But, with the method I used, I can only do it by days.
This is my code.
var MinDate = formatDate_t( new Date(Math.min(...dates)));
var MaxDate = formatDate_t(new Date(Math.max(...dates)));
// MinDate and MaxDate came from my database.
var interval = (new Date(MaxDate)).getFullYear() - (new Date(MinDate)).getFullYear() + 2;
console.log(interval);
var dataTime = d3.range(0, interval).map(function (d) {
return new Date(((new Date(MinDate)).getFullYear()) + d, 0, 1);
});
var sliderTime = d3
.sliderBottom()
.min(d3.min(dataTime))
.max(d3.max(dataTime))
.step(1000 * 60 * 60 * 24 * 30)
.width(800)
.tickFormat(d3.timeFormat('%b-%Y'))
.tickValues(dataTime)
.default([new Date(MinDate), new Date(MaxDate)])
var gTime = d3
.select('div#slider-time')
.append('svg')
.attr('width', 1250)
.attr('height', 100)
.append('g')
.attr('transform', 'translate(30,30)');
At the line ".step(1000 * 60 * 60 * 24 * 30)", I would like to increment it each month exactly, instead of each 30 days.
Is it possible?
Thanks for your help.
You should use slider.marks instead of slider.step when you need the slider to snap to values that are not equidistant. In your example, create an the array of months in your time interval and use them as input to slider.marks.
const minDate = new Date('1998-01-11'),
maxDate = new Date('2021-12-17'),
interval = maxDate.getFullYear() - minDate.getFullYear() + 1,
startYear = minDate.getFullYear();
let dataMonths = [];
for (let year = 0; year < interval; year++) {
for (let month = 0; month < 12; month++) {
dataMonths.push(new Date(startYear + year, month, 1));
}
}
const sliderTime = d3
.sliderBottom()
.min(d3.min(dataMonths))
.max(d3.max(dataMonths))
.marks(dataMonths)
.width(500)
.tickFormat(d3.timeFormat('%b %Y'))
.tickValues(dataMonths.filter(d => d.getMonth === 0))
.default(minDate);
const gTime = d3
.select('div#slider-time')
.append('svg')
.attr('width', 600)
.attr('height', 100)
.append('g')
.attr('transform', 'translate(30,30)');
gTime.call(sliderTime);<script src="https://d3js.org/d3.v6.min.js"></script>
<script src="https://unpkg.com/d3-simple-slider"></script>
<div id="slider-time"></div>