乐闻世界logo
5月27日 14:32

如何用 SVG 从零创建交互式数据图表？

在网页上画一张图表，很多人第一反应是找 Chart.js 或 ECharts 这样的库，写几行配置就出图。但当你需要定制一个标尺刻度倾斜 30 度、柱子圆角渐变、悬停时弹出带箭头提示框的图表时，配置项就不够用了——你得回到 SVG 本身。SVG 是所有这些图表库的底层绘图语言，理解它意味着你能在任何场景下精确控制每一个像素。

SVG 图表基础：用原生标签画三种经典图表

SVG（Scalable Vector Graphics）是一种基于 XML 的矢量图形格式，浏览器可以直接渲染。它的核心优势在于：每个图形元素都是 DOM 节点，可以像操作 HTML 一样用 CSS 和 JavaScript 控制。

柱状图

柱状图是最直观的图表类型。核心思路：为每条数据生成一个 <rect> 元素，x 坐标按索引递增，y 坐标和高度由数据值决定。

xml
<svg width="500" height="300" viewBox="0 0 500 300">
  <!-- Y 轴 -->
  <line x1="40" y1="10" x2="40" y2="260" stroke="#333" />
  <!-- X 轴 -->
  <line x1="40" y1="260" x2="490" y2="260" stroke="#333" />
  <!-- 柱子 -->
  <rect x="60"  y="160" width="50" height="100" fill="#4F46E5" rx="4" />
  <rect x="130" y="110" width="50" height="150" fill="#4F46E5" rx="4" />
  <rect x="200" y="60"  width="50" height="200" fill="#4F46E5" rx="4" />
  <rect x="270" y="135" width="50" height="125" fill="#4F46E5" rx="4" />
  <rect x="340" y="85"  width="50" height="175" fill="#4F46E5" rx="4" />
</svg>

关键点：y 的值等于画布高度减去柱子高度，因为 SVG 坐标系原点在左上角。rx="4" 给柱子加上圆角，这是 SVG 原生支持的属性，不需要额外 CSS。

折线图

折线图的核心是 <polyline> 或 <path>，把数据点连成线。

xml
<svg width="500" height="300" viewBox="0 0 500 300">
  <polyline
    points="60,200 130,160 200,80 270,140 340,90 410,110"
    fill="none"
    stroke="#4F46E5"
    stroke-width="2.5"
    stroke-linejoin="round"
  />
  <!-- 数据点 -->
  <circle cx="60"  cy="200" r="4" fill="#4F46E5" />
  <circle cx="130" cy="160" r="4" fill="#4F46E5" />
  <circle cx="200" cy="80"  r="4" fill="#4F46E5" />
  <circle cx="270" cy="140" r="4" fill="#4F46E5" />
  <circle cx="340" cy="90"  r="4" fill="#4F46E5" />
  <circle cx="410" cy="110" r="4" fill="#4F46E5" />
</svg>

如果需要平滑曲线，把 <polyline> 替换为 <path>，使用三次贝塞尔曲线命令（C 或 S）即可。D3.js 的 d3.line().curve(d3.curveCatmullRom) 可以自动生成平滑路径。

饼图

饼图用 <path> 的弧线命令（A）绘制扇形，但手工计算弧线参数很繁琐。更实用的方式是用 stroke-dasharray 和 stroke-dashoffset 技巧在 <circle> 上实现：

xml
<svg width="200" height="200" viewBox="0 0 200 200">
  <circle
    cx="100" cy="100" r="80"
    fill="none"
    stroke="#4F46E5"
    stroke-width="40"
    stroke-dasharray="251.3 502.65"
    stroke-dashoffset="0"
  />
  <circle
    cx="100" cy="100" r="80"
    fill="none"
    stroke="#7C3AED"
    stroke-width="40"
    stroke-dasharray="150.8 502.65"
    stroke-dashoffset="-251.3"
  />
  <circle
    cx="100" cy="100" r="80"
    fill="none"
    stroke="#A78BFA"
    stroke-width="40"
    stroke-dasharray="100.55 502.65"
    stroke-dashoffset="-402.1"
  />
</svg>

原理：圆的周长 = 2 * π * r = 502.65，stroke-dasharray 的第一个值是可见弧长（对应数据占比），第二个值是总周长。stroke-dashoffset 控制起始偏移量，让多个扇形依次排列。

D3.js 与 SVG：数据驱动的图表开发

手写 SVG 标签适合理解原理，但真实项目中数据是动态的。D3.js 解决的核心问题是：把数据和 SVG 元素绑定起来，数据变了图自动变。

数据绑定与 enter-update-exit 模式

javascript
const data = [120, 180, 90, 150, 200];
const svg = d3.select('#chart')
  .append('svg')
  .attr('width', 500)
  .attr('height', 300);

const bars = svg.selectAll('rect')
  .data(data);

// enter: 新数据对应的元素
bars.enter()
  .append('rect')
  .attr('x', (d, i) => 50 + i * 80)
  .attr('y', d => 260 - d)
  .attr('width', 50)
  .attr('height', d => d)
  .attr('fill', '#4F46E5')
  .attr('rx', 4);

// update: 已存在元素的数据变化时
bars.attr('height', d => d);

// exit: 多余的元素移除
bars.exit().remove();

这个模式是 D3 的核心。enter 处理新增数据，update 处理数据变化，exit 处理数据减少。理解了它，你就理解了 D3 的一切数据绑定逻辑。

比例尺：数据到像素的映射

手写 SVG 时你得自己算坐标，D3 的比例尺把这个过程标准化了：

javascript
const xScale = d3.scaleBand()
  .domain(data.map((d, i) => i))
  .range([50, 480])
  .padding(0.2);

const yScale = d3.scaleLinear()
  .domain([0, d3.max(data)])
  .range([260, 20]);

bars.enter()
  .append('rect')
  .attr('x', (d, i) => xScale(i))
  .attr('width', xScale.bandwidth())
  .attr('y', d => yScale(d))
  .attr('height', d => 260 - yScale(d));

scaleBand 用于离散数据（柱状图的分类轴），scaleLinear 用于连续数据（数值轴）。range 的方向决定了坐标映射：y 轴从下到上递增，所以 range 是 [260, 20]（从画布底部到顶部）。

坐标轴一键生成

javascript
svg.append('g')
  .attr('transform', 'translate(0, 260)')
  .call(d3.axisBottom(xScale));

svg.append('g')
  .attr('transform', 'translate(50, 0)')
  .call(d3.axisLeft(yScale));

d3.axisBottom 和 d3.axisLeft 会自动生成刻度线、刻度文字和轴线，省去大量手写 SVG 的工作。

响应式图表：让 SVG 适配任何屏幕

SVG 天然支持缩放，关键在于正确设置 viewBox 和容器样式。

html
<div class="chart-container">
  <svg viewBox="0 0 500 300" preserveAspectRatio="xMidYMid meet">
    <!-- 图表内容 -->
  </svg>
</div>

<style>
.chart-container {
  width: 100%;
  max-width: 800px;
}
.chart-container svg {
  width: 100%;
  height: auto;
}
</style>

核心逻辑：viewBox="0 0 500 300" 定义了内部坐标空间，width: 100% 让 SVG 撑满容器，height: auto 保持宽高比。图表内容用固定坐标绘制，浏览器自动缩放。

如果需要在窗口变化时动态调整边距和字体大小，可以监听 resize 事件，重新计算比例尺的 range 并更新元素属性：

javascript
function resize() {
  const containerWidth = document.querySelector('.chart-container').clientWidth;
  xScale.range([50, containerWidth - 20]);
  svg.selectAll('rect').attr('x', (d, i) => xScale(i)).attr('width', xScale.bandwidth());
  svg.selectAll('.x-axis').call(d3.axisBottom(xScale));
}
window.addEventListener('resize', resize);

动画效果：SMIL 与 CSS 两条路径

SMIL 动画

SMIL（Synchronized Multimedia Integration Language）是 SVG 原生的动画规范，直接写在 SVG 标签内：

xml
<rect x="60" y="260" width="50" height="0" fill="#4F46E5" rx="4">
  <animate
    attributeName="height"
    from="0"
    to="100"
    dur="0.6s"
    fill="freeze"
  />
  <animate
    attributeName="y"
    from="260"
    to="160"
    dur="0.6s"
    fill="freeze"
  />
</rect>

这段代码让柱子从底部向上"长出来"。SMIL 的优点是声明式、不需要 JavaScript，但 Chrome 曾在 2015 年宣布废弃 SMIL（后来收回），且 SMIL 无法响应数据变化，所以实际项目中使用较少。

CSS 动画

更主流的方式是用 CSS 控制 SVG 属性：

css
.chart-bar {
  transform-origin: bottom;
  transform: scaleY(0);
  animation: growUp 0.6s ease-out forwards;
}

@keyframes growUp {
  to { transform: scaleY(1); }
}
xml
<rect class="chart-bar" x="60" y="160" width="50" height="100" fill="#4F46E5" rx="4" />

CSS 动画可以用 transition 做交互过渡，也能用 @keyframes 做入场动画，浏览器性能优化更好。但注意：CSS 动画只能控制 CSS 可设置的 SVG 属性（如 transform、opacity、fill），不能控制 x、y、width 等呈现属性（在 SVG 2 中部分属性已支持 CSS 化）。

D3 过渡动画

D3 提供了 transition() API，最适合数据驱动的动画场景：

javascript
bars.enter()
  .append('rect')
  .attr('y', 260)
  .attr('height', 0)
  .transition()
  .duration(600)
  .ease(d3.easeCubicOut)
  .attr('y', d => yScale(d))
  .attr('height', d => 260 - yScale(d));

数据更新时的过渡效果：

javascript
bars.transition()
  .duration(400)
  .attr('y', d => yScale(d))
  .attr('height', d => 260 - yScale(d));

D3 的过渡 API 在数据变化场景下比 CSS 动画更灵活，因为它可以精确控制每个属性的插值起止值。

交互实现：悬停提示与缩放

悬停提示

SVG 元素可以直接绑定 DOM 事件。一个简洁的 tooltip 实现：

javascript
const tooltip = d3.select('body')
  .append('div')
  .attr('class', 'tooltip')
  .style('position', 'absolute')
  .style('padding', '6px 12px')
  .style('background', 'rgba(0,0,0,0.8)')
  .style('color', '#fff')
  .style('border-radius', '4px')
  .style('font-size', '13px')
  .style('pointer-events', 'none')
  .style('opacity', 0);

bars.on('mouseover', function(event, d) {
  d3.select(this).attr('fill', '#6366F1');
  tooltip.style('opacity', 1)
    .html(`值: ${d}`);
})
.on('mousemove', function(event) {
  tooltip
    .style('left', event.pageX + 10 + 'px')
    .style('top', event.pageY - 20 + 'px');
})
.on('mouseout', function() {
  d3.select(this).attr('fill', '#4F46E5');
  tooltip.style('opacity', 0);
});

注意 pointer-events: none 很重要——没有它，鼠标移到 tooltip 上会触发 mouseout，导致闪烁。

缩放与平移

D3 的 d3.zoom() 模块提供了完整的缩放平移方案：

javascript
const zoom = d3.zoom()
  .scaleExtent([0.5, 5])
  .on('zoom', (event) => {
    chartGroup.attr('transform', event.transform);
  });

svg.call(zoom);

chartGroup 是一个包含所有图表内容的 <g> 元素。event.transform 包含 x、y、k（缩放比例）三个值，通过 transform 属性一次性应用。scaleExtent 限制缩放范围在 0.5x 到 5x 之间。

如果只想缩放 X 轴（比如时间轴上的数据浏览），需要手动在 zoom 回调中更新 xScale 和所有关联元素：

javascript
const zoom = d3.zoom()
  .on('zoom', (event) => {
    const newXScale = event.transform.rescaleX(xScale);
    svg.selectAll('rect')
      .attr('x', (d, i) => newXScale(i))
      .attr('width', newXScale.bandwidth());
    svg.select('.x-axis').call(d3.axisBottom(newXScale));
  });

性能优化：从渲染层到代码层

减少 DOM 节点数量

SVG 的性能瓶颈在于 DOM 节点过多。浏览器需要为每个节点维护事件监听、样式计算和渲染信息。优化策略：

  • 合并相似元素：用 <path> 代替多个 <rect>，一条路径一个 DOM 节点
  • 虚拟化渲染：只绘制可视区域内的数据点，滚动时动态更新。D3 社区有 d3-visualization-virtual-scroller 等方案
  • 简化路径：使用 d3.line().curve() 生成的路径比手工贝塞尔曲线更精简

使用 requestAnimationFrame 批量更新

避免在循环中逐个更新 SVG 属性，把更新集中在一帧内：

javascript
function updateChart(newData) {
  requestAnimationFrame(() => {
    svg.selectAll('rect')
      .data(newData)
      .attr('y', d => yScale(d))
      .attr('height', d => 260 - yScale(d));
  });
}

关闭不可见元素的事件监听

大量数据点时，给每个点绑定事件监听开销很大。改用事件委托：

javascript
svg.on('mousemove', function(event) {
  const target = event.target;
  if (target.classList.contains('data-point')) {
    const data = d3.select(target).datum();
    showTooltip(event, data);
  }
});

只给 SVG 容器绑定一个事件，通过 event.target 判断实际触发的元素，从 N 个监听器降为 1 个。

CSS will-change 提示

对频繁动画的元素加上 will-change: transform，让浏览器提前创建合成层：

css
.chart-bar {
  will-change: transform, opacity;
}

但不要滥用——每个 will-change 都会消耗显存，只用在确实需要动画的元素上。

SVG vs Canvas：什么时候该换？

这个选择取决于你的数据规模和交互需求。

SVG 的优势场景：

  • 数据点少于 3000-5000 个
  • 需要每个元素独立的悬停、点击事件
  • 需要屏幕阅读器可访问（每个元素都可以加 ARIA 标签）
  • 需要无损缩放，图表可能在不同分辨率设备上展示
  • 需要 CSS 样式控制

Canvas 的优势场景：

  • 数据点超过 5000 个（热力图、散点图、实时数据流）
  • 需要每秒 60 帧的持续重绘（粒子动画、实时股价图）
  • 不需要单独操作每个数据元素
  • 对无障碍访问没有强制要求

混合方案：一些图表库（如 Highcharts、ECharts）提供了 SVG/Canvas 双模式切换。你也可以在同一个页面中混合使用——用 SVG 画坐标轴和标签（需要清晰缩放和交互），用 Canvas 画数据密集区域（需要高性能渲染）。

一个简单的判断流程：先用 SVG，如果性能不够再考虑 Canvas。过早切换到 Canvas 会丢失 SVG 的交互便利性和可访问性，开发成本也会上升。

总结

SVG 图表开发的路线是清晰的：先用原生标签理解坐标系和基本图形，再用 D3.js 的数据绑定和比例尺处理动态数据，通过 viewBox 实现响应式，用 CSS 动画或 D3 transition 加上动效，最后用事件绑定实现交互。性能瓶颈出现时，先从减少 DOM 节点、事件委托、批量更新入手，数据量超出 SVG 承受范围再切换 Canvas。掌握这些层次，你就不再受限于图表库的配置项，而是能从底层精确控制图表的每个细节。

标签：SVG