它是如何制作的：由滚动条控制的svg图形

Question

纽约时报刚刚制作了这个漂亮的图表动画，知道它背后的技术是什么吗？

http://www.nytimes.com/interactive/2014/03/31/science/motorcycle-helmet-laws.html?_r=0

Answer 1

它看起来很漂亮的D3东西（在引擎盖下使用SVG）。不知道滚动条业务是如何工作的，但我发现它在IE11中不起作用，因此它可能是由库驱动的，而不是原生的SVG / JavaScript，它通常适用于不同的浏览器。曲线插值的基础技术可以使用SMIL（自然方式）或通过JavaScript完成，但插值Bezier曲线的控制点值（二次或三次）。参见 http://cs.sru.edu/~ddailey/svg/2011/reshaping.html示例或曲线插值。您会注意到Firefox仍然无法处理此页面上的第二个动画，但我想我从来没有去过提交错误。它应该在其他地方工作（除了IE，因为他们不做SVG / SMIL）。