javascript - d3 年滑块显示步骤之间的区域

Question

我正在尝试在 2000 年到 2021 年的 d3 (v5) 中创建一个步进滑块。（使用插件 d3-simple-slider）

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

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

然而，显示的滑块似乎启用了“步骤”之间的区域，并且年份似乎也在移动。

1. 有没有办法只启用步骤的确切点？
2. 如何使滑块响应？

提前致谢！

标签： javascripthtmld3.jsvisualization

Answer 1

将您的数据减少到只有偶数年并设置为tickValues：

const tickData = data.reduce((a, v, i) => i % 2 === 0 ? [...a, v] : a, []);

const slider = sliderBottom()
  .min(min(data))
  .max(max(data))
  .step(1000 * 60 * 60 * 24 * 365)
  .tickFormat(timeFormat('%Y'))
  .tickValues(tickData)
  . . .