d3 年滑块启用步骤之间的区域

Question

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

  var parseTime = d3.timeParse("%Y");
  a1 = parseTime("2010")
  a2 = parseTime("2015")
  var sliderStep = d3
    .sliderBottom()
    .domain([a1,a2])
    .width(300)
    .tickFormat(d3.timeFormat('%Y'))
    .on('onchange', <stuff>
    });

  var gStep = d3
    .select('div#slider-step')
    .attr("class","slider")
    .append('svg')
    .attr('width', 510)
    .attr('height', 100)
    .append('g')
    .attr('transform', 'translate(30,30)');

然而，显示的滑块似乎使 "steps" 和年份之间的区域似乎也随之移动。有没有办法只启用步骤中的确切点？提前致谢！

Answer 1

问题是由于2012年是闰年。为了克服这种特殊情况，您可以将步骤方法添加为，

.step(1000 * 60 * 60 * 24 * 366)

但这并不能使一切都完美。如果你检查日期变化，你会发现。如果只考虑年份的话，我觉得还是做一个年份的数组作为数据比较好，你可以根据场景使用其他函数随意改变这个数组。

d3 年滑块启用步骤之间的区域

d3 year slider enables area in between steps

html

javascript

css

visualization

d3.js