例如想绘制下面的日期选择器，每一个小线段代表一个颜色，一个可以滑动的时间窗口用来标记当前的时间范围。
滑动时间窗口
如果不用借助D3，我们会面临一个问题，每个线段的长度都需要计算，每个月的天数都不同，所以对应的长度也不同，而且还需要做闰年判断。另外，还需要监听页面大小变动的事件。
有了D3，这些就是几句话的事情
d3.scaleTime().domain([
new Date(year, 1, 1),
new Date(year, 12, 31),
])
.range([0,totalWidth])
上面这句话就定义了一个时间上的线性映射，让1月1日映射为0,12月31日映射为总长度。
后面就好办了，例如每个月的第一天的坐标就可以一行代码得到：
d3.range(12).map((idx) => scale(new Date(year.value, idx, 1)))
可以看出D3不仅仅是绘图库，它的好处在于，D3把绘图常见情景的数据处理都封装好了，的确是很方便。
p.s.
JS原生的 Date 好坑，new Date(2022,1,1) 居然对应的是2月1日，太反人类了！
网友评论