Question

所以，我试图使用我分配点的SVG和折线制作图表。那部分不是麻烦，而是新的，因为我在网络开发，我正在努力使其互动。我希望它在鼠标悬停时显示工具提示中某个X值的Y值。我设法创建了一个工具提示，但不知道如何获取Y值，所以有一个很好的方法吗？

我尝试做的另一件事是为折线设置动画，使其看起来像是实际绘制的，而不是仅在读取坐标后出现在屏幕上。我在这里找到了类似于SVG中的Path的内容：https://jakearchibald.com/2013/animated-line-drawing-svg/

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';

这是路径动画代码的样子，但由于某种原因它不能在折线上工作。是否有一个特定的原因让该路径不等于折线？

Answer 1

我自己正在做类似的事情，但尚未解决工具提示。但是，我确实有一个基于您引用的同一博客帖子的动画折线的工作示例。

我能看到的唯一区别是，我的{＃1}}使用的是style.webkitTransition（注意小w）。我注意到了相同的差异in this answer.也许是自2013年以来的某个时候，CSS属性的名称使用小写字母进行了标准化。

style.WebkitTransition

function cssAnimate() {
  var polyline = document.getElementById('plotLine');
  var length = polyline.getTotalLength();
  // Clear any previous transition
  polyline.style.transition = polyline.style.webkitTransition = 'none';
  // Set up the starting positions
  polyline.style.strokeDasharray = length + ' ' + length;
  polyline.style.strokeDashoffset = length;
  // Trigger a layout so styles are calculated & the browser
  // picks up the starting position before animating
  polyline.getBoundingClientRect();
  // Define our transition
  polyline.style.transition = polyline.style.webkitTransition = 'stroke-dashoffset 3s ease-in-out';
  // Go!
  polyline.style.strokeDashoffset = '0';
}
cssAnimate();

如何制作互动＆amp;动画SVG折线图

1 个答案: