Javascript 如何制作互动&；动画SVG多段线图表

所以，我尝试使用SVG和多段线来制作一个图表，并将点指定给它们。这一部分并没有问题，但却是新的，因为我在web开发中，正在努力使它具有交互性。 我想让它在鼠标上方的某个X值的工具提示中显示Y值。我设法创建了一个工具提示，但不知道如何获取Y值，所以有没有一个好的方法来做到这一点

我尝试做的另一件事是设置多段线的动画，使其看起来像是实际绘制的，而不是在读取坐标后显示在屏幕上。我在SVG中找到了类似的路径：

---

这是路径动画代码的外观，但由于某些原因，它在多段线上不起作用。给出的路径不等于多段线是否有具体原因

我自己也在做类似的事情，但我还没有处理工具提示。但是，我有一个基于您引用的同一篇博客文章的动画多段线的工作示例

我能看到的唯一区别是我使用的是

style.webkitTransition

（注意小

w

），而您的代码使用的是

style.webkitTransition

。我注意到了相同的差异，可能是在2013年以后的某个时候，CSS属性的名称被标准化为小写字母

函数cssAnimate（）{
var polyline=document.getElementById（'plotLine'）；
var length=polyline.getTotalLength（）；
//清除以前的任何转换
polyline.style.transition=polyline.style.webkitTransition='none'；
//设置起始位置
polyline.style.strokeDasharray=长度+''+长度；
polyline.style.strokeDashoffset=长度；
//触发布局，以便在浏览器中计算样式
//在设置动画之前拾取起始位置
polyline.getBoundingClientRect（）；
//定义我们的过渡
polyline.style.transition=polyline.style.webkitTransition='stroke dashoffset 3s ease in out'；
//走！
polyline.style.strokeDashoffset='0'；
}
cssAnimate（）


var path = document.querySelector('.squiggle-animated path');
var length = path.getTotalLength();
// Clear any previous transition
path.style.transition = path.style.WebkitTransition =
'none';
// Set up the starting positions
path.style.strokeDasharray = length + ' ' + length;
path.style.strokeDashoffset = length;
// Trigger a layout so styles are calculated & the browser
// picks up the starting position before animating
path.getBoundingClientRect();
// Define our transition
path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset 2s ease-in-out';
// Go!
path.style.strokeDashoffset = '0';