Tengo una aplicación ASP.NET en la que estoy usando D3.js. Tengo un control deslizante de tiempo que puedo mostrar en mi página web y quiero incrementarlo mes a mes.
Pero, con el método que usé, solo puedo hacerlo por días.
Este es mi código.
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)'); En la línea ".step(1000 * 60 * 60 * 24 * 30)", me gustaría incrementarla exactamente cada mes, en lugar de cada 30 días.
¿Es posible?
Gracias por tu ayuda.
Debe usar slider.marks en lugar de slider.step cuando necesite que el control deslizante se ajuste a valores que no son equidistantes. En su ejemplo, cree una matriz de meses en su intervalo de tiempo y utilícelos como entrada para 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>