SVG 绘制动态曲线图 —— 完美超越 Canvas

2024-01-28 21:26:39

不知从什么时候开始，很多开发人员只要是遇到数据的可视化展示，第一反应都是：掏出 Canvas 就完事了！
没错，Canvas 很好用，它可以很灵活的绘制任何图形，可以以更底层的逻辑来控制页面的渲染。
但当你的需求不仅仅是简单的图形绘制的时候，Canvas 的劣势就显现出来了。
Canvas 本身没有提供任何关于图形生成和交互的封装，如果你需要绘制一个稍微复杂的图形，那你就需要自己实现一系列复杂的函数，比如坐标系的定义，图形的绘制，图形的交互处理等等。

SVG 是一种基于 XML 的可伸缩矢量图形格式，它可以定义图形的外观、颜色、渐变，以及交互行为。SVG 与 Canvas 相比，具有以下优点：

SVG是一种基于文本的格式，更便于理解和编辑。
SVG 可以被缩放和旋转，而不会损失质量。
SVG支持交互，如点击、悬停和拖动。
SVG 可以与其他 HTML 元素混合使用，这使得它更容易集成到Web页面中。

因此，如果你需要绘制一个动态的曲线图，那么 SVG 是一个更好的选择。

使用 SVG 绘制动态曲线图的步骤如下：

创建一个 SVG 画布。
定义坐标系。
创建数据点。
使用 SVG 路径元素绘制曲线图。
添加动画效果。

以下是一个使用 SVG 绘制动态曲线图的示例：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <svg id="svg" width="600" height="400"></svg>

  <script>
    // 创建一个 SVG 画布
    var svg = document.getElementById("svg");

    // 定义坐标系
    var x = d3.scaleLinear()
      .domain([0, 10])
      .range([0, 600]);

    var y = d3.scaleLinear()
      .domain([0, 10])
      .range([400, 0]);

    // 创建数据点
    var data = [
      { x: 0, y: 0 },
      { x: 1, y: 2 },
      { x: 2, y: 4 },
      { x: 3, y: 5 },
      { x: 4, y: 7 },
      { x: 5, y: 9 },
      { x: 6, y: 10 }
    ];

    // 使用 SVG 路径元素绘制曲线图
    var line = d3.line()
      .x(function(d) { return x(d.x); })
      .y(function(d) { return y(d.y); });

    svg.append("path")
      .datum(data)
      .attr("d", line)
      .attr("stroke", "red")
      .attr("fill", "none");

    // 添加动画效果
    var totalLength = svg.select("path").node().getTotalLength();

    svg.select("path")
      .attr("stroke-dasharray", totalLength + " " + totalLength)
      .attr("stroke-dashoffset", totalLength)
      .transition()
      .duration(2000)
      .ease(d3.easeLinear)
      .attr("stroke-dashoffset", 0);
  </script>
</body>
</html>