在 D3.js 的时间滑块中逐月递增

Question

我有一个 ASP.NET 应用程序，我正在其中使用 D3.js。我有一个可以显示在我的网页上的时间滑块，我想逐月增加它。
但是，我用的方法，只能按天来做。
这是我的代码。

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)');

在“.step(1000 * 60 * 60 * 24 * 30)”这一行，我想每个月精确递增一次，而不是每 30 天递增一次。
可能吗？

感谢您的帮助。

Answer 1

当您需要滑块捕捉到不等距的值时，您应该使用 slider.marks 而不是 slider.step。在您的示例中，在您的时间间隔内创建一个月份数组，并将它们用作 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>

在 D3.js 的时间滑块中逐月递增

Incrementing month by month in a time slider with D3.js

javascript

asp.net

d3.js