18、D3与SVG开发全攻略

echo99

于 2025-11-17 13:47:14 发布

阅读量21

点赞数

CC 4.0 BY-SA版权

分类专栏： D3.js实战精要文章标签： D3 SVG 数据可视化

本文链接：https://blog.youkuaiyun.com/echo99/article/details/155007418

D3.js实战精要专栏收录该内容

20 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

D3与SVG开发全攻略

1. D3开发环境搭建

在使用D3进行开发时，需要运行一个Web服务器来提供页面、JavaScript文件和其他资源（如数据文件）。虽然理论上可以使用 file: 协议加载本地页面及其引用的JavaScript文件，但浏览器可能会根据其跨源资源共享（CORS）策略阻止JavaScript代码加载其他资源，不同浏览器在这方面表现不一致，因此建议始终使用Web服务器。

以下是几种搭建Web服务器的方法：
- 使用http-server（Node.js包） ：
- 前提条件：安装Node运行时和npm包管理器。
- 操作步骤：
- 安装： npm install -g http-server
- 运行： http-server ./project -p 8080
- 使用Python的Web服务器模块 ：
- Python 3 ： python -m http.server -d ./project 8080 （ -d 参数需要Python 3.7或更高版本）
- Python 2 ： python -m SimpleHTTPServer 8080 （当前目录）
- 使用busybox的Web服务器 ：在所有基于Debian的Linux发行版中，busybox工具集通常默认安装。其内置的Web服务器性能良好且速度快。
- 操作步骤： busybox httpd -h ./project -p 8080

除了搭建服务器，还需要将D3库引入项目。可以从 https://d3js.org 下载当前版本的库，解压后将库文件放入项目目录。有两个功能等效的版本：完整的、人类可读的 d3.js 和“压缩”版的 d3.min.js ，后者可将下载大小减少一半以上。

以下是一个最小化的HTML文档示例，遵循当前HTML5文档结构的建议，同时引用了D3库和一个名为 script.js 的JavaScript文件：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Document Title</title>
  <script src="d3.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <svg id="fig1" width="500" height="300" />
</body>
</html>

另外，也可以直接在项目网站或其他公共仓库引用D3：

<script src="https://d3js.org/d3.v5.min.js"></script>

为了在页面完全加载后执行JavaScript代码，需要在代码中注册一个JavaScript函数作为 load 事件的事件处理程序。推荐的做法是在JavaScript文件中包含以下代码：

window.addEventListener( "load", main )

这样，页面加载完成后将调用名为 main() 的JavaScript函数（函数名可任意指定）。可以重复此代码行，以便在页面加载时调用不同的函数。

2. 相关工具介绍

SVG文件编辑工具 ：SVG文件是XML文件，因此可以使用处理XML的常用工具进行操作，包括常用的文本编辑器。Inkscape是一款成熟的SVG文件编辑器，但较为复杂。还有其他一些矢量图形编辑器可以处理SVG，但通常不允许在DOM树级别进行操作。
SVG格式转换工具 ：有几个命令行工具可将SVG转换为其他格式，如PDF或PNG，其中包括 rsvg-convert 和 svgcairo-py3 。使用 svgcairo 效果较好。需要注意的是， svgcairo 需要 csstiny 和 cssselect 来处理样式表信息，如果这两个模块不存在， svgcairo 仍可继续工作，但会默默忽略所有样式信息。
浏览器的无头模式 ：浏览器在处理SVG规范的新特性或高级特性时通常表现最佳。可以通过无头模式利用这一点，在无头模式下，浏览器照常执行所有命令（包括所有SVG指令和JavaScript代码），但不将结果渲染到屏幕上，而是通常可以将完全渲染的页面“截图”保存到文件中，这可能是转换其他工具处理不好的复杂SVG图像的最佳方法。不同浏览器开启无头模式的命令行标志不同，如Firefox使用 -headless ，Chrome使用 --headless 。
SVG提取工具 ：SVG Crowbar（ https://nytimes.github.io/svg-crowbar ）是一个书签工具，可帮助从网页中提取和下载SVG文档（仅适用于Chrome）。

3. 学习资源推荐

官方网站 ：D3的主要信息来源是项目主页 https://d3js.org ，这里有大量D3示例应用的图库、进一步文档的链接以及D3开发的相关信息。
参考文档 ：D3参考文档清晰详细，可在此获取最新信息和本书未提及的更多细节。
相关书籍 ：
- 《Interactive Data Visualization for the Web》（Scott Murray著，O’Reilly，第二版）：面向技术经验较少的读者，是一本受欢迎的D3入门书籍。
- 《D3.js in Action》（Elijah Meeks著，Manning Publications，第二版）：将D3置于通用数据可视化工作流程的背景下进行介绍。
网站和示例集合 ：

4. SVG基础介绍

SVG（可缩放矢量图形）是一种用于创建二维图形的矢量图像格式，支持交互性和动画。SVG文件是基于XML的文本文件，可以手动编辑和（至少原则上）搜索，它会生成一个DOM树（而不是像画布一样的“扁平”图像）。

SVG图像可以是独立文档（较少见），也可以包含在网页中。现代浏览器可以处理HTML文档中包含的 <svg>...</svg> 元素，SVG文件也可以像其他图像一样包含： <img src="file.svg" /> ，此时SVG文件必须声明适当的命名空间：

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:svg="http://www.w3.org/2000/svg">

SVG的发展历程如下：1998年成立了W3C SVG工作组，2001年发布了第一个标准（SVG 1.0），目前正在开发将SVG与HTML5集成的全新版本（SVG 2），2016年SVG 2的草案标准成为W3C候选推荐标准。

5. SVG的通用概述

SVG定义了许多可渲染的图形元素，如基本形状、文本元素、线条和曲线等，其外观可以通过表示属性来控制，这些属性可以控制大小、位置、颜色等。同时，SVG还定义了一些结构元素，用于组织SVG文档中的信息，通过这些结构元素可以将其他元素组合成复杂的单元，以便重复使用或一起进行变换。

SVG可以通过 transform 属性对元素进行平移、旋转、拉伸等变换。一般来说，SVG元素按文档顺序渲染，文档中较早出现的元素在视觉上会“位于”较晚出现的元素后面，后面的元素会遮挡前面的元素。

SVG使用图形坐标，原点位于左上角，垂直轴向下，位置和大小以无量纲的用户坐标测量，图形（及其包含的元素）的绝对大小由渲染设备决定。此外，SVG文档可以接收用户事件并调用相应的事件处理程序，文档可以根据事件进行更改，从而提供一种交互式图形用户界面（GUI）。

6. SVG的基本形状

SVG为一组预定义的简单形状提供了明确的标签，每个形状都有一组特定的属性来控制其大小和位置，所有形状都接受常见的表示属性来修改其外观。以下是一些常见形状的介绍：
| 标签 | 特定属性 | 描述 |
| ---- | ---- | ---- |
| <rect> | x, y （左上角坐标）, width, height （宽度和高度）, rx, ry （水平和垂直圆角半径） | 矩形 |
| <circle> | cx, cy （中心坐标）, r （半径） | 圆形 |
| <ellipse> | cx, cy （中心坐标）, rx, ry （水平和垂直半径） | 椭圆形 |
| <line> | x1, y1 （起点坐标）, x2, y2 （终点坐标） | 直线 |

需要注意的是， <polyline> 和 <polygon> 通常使用 <path> 元素来表示，下面将详细介绍 <path> 元素。

7. SVG的路径元素

<path> 元素是SVG中最底层的绘图命令，它可以使用一种类似海龟绘图的命令语言绘制任意形状。 <path> 元素除了常见的表示属性外，只有一个特定属性 d ，其值由一串以空格分隔的命令和坐标组成。命令通过单个字母指定，所有命令有大写和小写两种形式，大写字母表示后续坐标为绝对坐标，小写字母表示为相对坐标，坐标是无量纲的，负数坐标也是合法的。

以下是 <path> 元素中一些常见命令的介绍：
| 命令字母 | 坐标 | 描述 |
| ---- | ---- | ---- |
| M, m | x y, dx dy | 移动到指定位置（不绘制线条） |
| L, l | x y, dx dy | 绘制直线到指定位置 |
| V, v | y, dy | 绘制垂直直线 |
| H, h | x, dx | 绘制水平直线 |
| Z, z | - | 绘制直线到第一个点，形成适当的（直线）斜接连接（可出现在命令字符串中间，不只是结尾） |
| Q, q | cx cy x y | 从当前位置到 x, y 绘制二次贝塞尔曲线，控制点为 cx, cy |
| T, t | 多个点 | 通过多个控制点绘制二次贝塞尔曲线 |
| C, c | cx1 cy1 cx2 cy2 x y | 从当前位置到 x, y 绘制三次贝塞尔曲线，控制点为 cx1, cy1 和 cx2, cy2 |
| S, s | 多个点 | 通过多个控制点绘制三次贝塞尔曲线 |
| A, a | rx ry phi arg sweep x y | 从当前位置（弧的起点）到 x, y （弧的终点）绘制椭圆弧， rx, ry, phi 确定椭圆的大小和相对于坐标系的旋转，其余参数是二进制标志，用于唯一确定该代数问题的四个可能解之一 |

在实践中，命令字符串通常自动生成，但也可以手动编写。例如：

<path d="M10 10 L50 50" />

8. SVG中的文本元素

可以使用 <text> 元素在SVG图像中包含文本， <text> 元素可以包含 <tspan> 元素，用于对部分文本进行样式设置或定位。 <textPath> 元素可用于沿 <path> 元素定义的路径渲染文本。

除了 text-anchor （仅适用于 <text> 元素）外，以下属性适用于 <text> 和 <tspan> 元素：
| 属性 | 描述 |
| ---- | ---- |
| x, y | 绝对位置 |
| dx, dy | 相对于默认文本位置的位置（不是相对于父元素） |
| rotate | 每个字形的旋转角度，顺时针方向，以度为单位 |
| text-anchor | 控制文本相对于其原点的对齐方式，合法值为 start 、 middle 和 end （对于从左到右的文本，分别相当于左对齐、居中对齐和右对齐） |

在颜色方面，文本元素与其他图形元素类似，每个字形的主体颜色由 fill 属性控制，字形轮廓的颜色由 stroke 属性控制。对于大多数普通字体大小，建议使用 stroke="none" 。 <text> 元素不包含换行机制，多行文本必须由单个 <text> 元素构建。此外，还有其他机制可用于单独控制文本中每个字形的渲染以及选择字体和字体属性。

9. SVG的表示属性

SVG定义了大量的表示属性，以下是一些最常用的属性：
| 属性 | 描述 |
| ---- | ---- |
| stroke | 元素轮廓的颜色，默认值为 none |
| stroke-width | 元素轮廓的宽度，默认值为1 |
| stroke-opacity | 元素轮廓的不透明度，取值范围为0（完全透明）到1（完全不透明），默认值为1 |
| stroke-dasharray | 控制用于绘制元素轮廓的虚线和间隙模式 |
| fill | 元素内部的颜色，默认值为黑色 |
| fill-opacity | 元素内部的不透明度，取值范围为0（完全透明）到1（完全不透明），默认值为1 |
| font-family | 渲染文本元素的字体家族 |
| font-size | 渲染文本元素的字体大小，可以用用户坐标（无明确单位）、点、百分比、像素或 ems 表示 |
| font-style | 渲染文本元素的字体样式，合法值为 normal 、 italic 和 oblique |
| font-weight | 渲染文本元素的字体粗细，合法值为 normal 、 bold 、 bolder 、 lighter 、100 - 900 |
| cursor | 鼠标指针悬停在元素上时显示的光标形状，合法值包括 auto （默认）、 default 、 crosshair 、 none 等 |
| opacity | 元素或一组元素的不透明度，取值范围为0（完全透明）到1（完全不透明），默认值为1 |
| display | 控制元素的渲染，设置为 none 时，元素及其子元素将从渲染树中移除，不进行渲染且无法接收事件 |
| visibility | 控制元素的可见性，设置为 visible 时显示，设置为 hidden 或 collapse 时不可见，但仍可能接收事件，且在文本布局时仍会占用空间 |

需要注意的是，SVG没有 color 属性，而是使用 fill 和 stroke ； fill 的默认值为黑色， stroke 的默认值为 none ，如果在不更新 stroke 属性的情况下将 fill 设置为 none ，元素将不可见。

10. SVG的颜色表示

SVG使用CSS3颜色语法指定颜色，标准允许使用多种颜色格式，以下是一些常见的格式：
| 属性 | 描述 |
| ---- | ---- |
| colorname | 148个预定义的颜色名称之一，如 red （由于8种颜色有别名，实际对应140种不同颜色），命名颜色不允许透明 |
| #RRGGBB | 以十六进制字符串表示的RGB值，每个颜色通道用00 - FF之间的十六进制数表示（不区分大小写） |
| #RRGGBBAA | 与 #RRGGBB 类似，但包含透明度信息，00表示完全透明，FF表示完全不透明 |
| rgb(r, g, b) | 使用函数调用表示法的RGB值，参数必须全部是0 - 255之间的整数或0% - 100%之间的百分比，使用百分比时必须包含百分号 |
| rgba(r, g, b, a) | 与 rgb(r, g, b) 类似，但包含透明度信息，不透明度参数 a 可以是0 - 1之间的浮点数或0% - 100%之间的百分比 |
| hsl(h, s, l) | HSL（色调、饱和度、亮度）值， h 参数应为整数，解释为0 - 360度之间的角度（0表示红色，120表示绿色，240表示蓝色）， s 和 l 参数必须是0% - 100%之间的百分比 |
| hsla(h, s, l, a) | 与 hsl(h, s, l) 类似，但包含透明度信息 |

此外，关键字 none 是 stroke 和 fill 的合法值，表示不应用任何颜色。

11. SVG的变换

SVG元素可以通过 transform 属性进行平移、旋转、拉伸和剪切等变换，这在结合 <g> 元素时，可以将复杂的元素组移动到最终位置，而无需更新每个元素的位置属性，同时还可以实现现有图形元素不直接支持的视觉效果，如倾斜轴的椭圆或斜向文本。

以下是一些常见的变换操作：
| 操作 | 描述 |
| ---- | ---- |
| translate(dx, dy) | 将当前元素沿 x 轴平移 dx ，沿 y 轴平移 dy |
| rotate(phi, x, y) | 将当前元素绕坐标为 x 和 y 的点逆时针旋转 phi 度，如果省略坐标，则绕图形原点旋转 |
| scale(fx, fy) | 在水平和垂直方向上按提供的比例因子缩放当前元素，如果省略 fy ，则两个方向都使用 fx |
| skewX(phi), skewY(phi) | 沿水平或垂直轴应用剪切变换 |
| matrix(a, b, c, d, e, f) | 应用一般仿射变换 |

反射可以表示为具有负比例因子的缩放变换，例如 scale(-1,1) 是关于垂直轴的反射， scale(1,-1) 是关于水平轴的反射， scale(-1,-1) 是通过原点的点反射。二维中的一般仿射变换可以用矩阵表示为：
[
\begin{bmatrix}
x’ \
y’
\end{bmatrix}
=
\begin{bmatrix}
a & c \
b & d
\end{bmatrix}
\begin{bmatrix}
x \
y
\end{bmatrix}
+
\begin{bmatrix}
e \
f
\end{bmatrix}
]

以下是一些变换的示例：

<ellipse cx="0" cy="0" rx="10" ry="20" transform="rotate(30)" />
<text x="0" y="0" transform="translate(100,100) rotate(15)">Hello</text>

通过以上内容，我们对D3的开发环境搭建、相关工具以及SVG的各种特性有了较为全面的了解，希望这些信息能帮助你在数据可视化开发中更好地使用D3和SVG。

D3与SVG开发全攻略（下半部分）

12. SVG开发流程总结

为了更清晰地展示SVG开发的整体流程，下面通过一个mermaid流程图来呈现：

graph LR
    A[开始] --> B[搭建Web服务器]
    B --> C{选择服务器类型}
    C -->|http-server| D1[安装并运行http-server]
    C -->|Python| D2[使用Python服务器模块]
    C -->|busybox| D3[使用busybox服务器]
    D1 --> E[引入D3库]
    D2 --> E
    D3 --> E
    E --> F{选择引入方式}
    F -->|本地文件| G1[下载并放置D3文件]
    F -->|远程引用| G2[直接引用D3网址]
    G1 --> H[创建HTML文档]
    G2 --> H
    H --> I[编写SVG元素]
    I --> J{选择元素类型}
    J -->|基本形状| K1[使用预定义形状标签]
    J -->|路径| K2[使用<path>元素绘制]
    J -->|文本| K3[使用<text>元素添加文本]
    K1 --> L[设置元素属性]
    K2 --> L
    K3 --> L
    L --> M[应用变换和样式]
    M --> N[处理用户事件]
    N --> O[测试和优化]
    O --> P[结束]

这个流程图涵盖了从搭建Web服务器开始，到引入D3库、创建HTML文档、编写SVG元素、设置属性、应用变换和样式、处理用户事件，最后进行测试和优化的整个开发过程。

13. 实际案例分析

下面通过一个简单的实际案例，来综合运用前面介绍的知识。假设我们要创建一个包含圆形和文本的SVG图表，并且让文本旋转一定角度。

首先，搭建Web服务器，这里我们选择使用Python的服务器模块：

python -m http.server -d ./project 8080

然后，引入D3库，我们直接引用远程的D3文件：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>SVG Example</title>
  <script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
  <svg id="chart" width="500" height="300"></svg>
  <script>
    // 在页面加载完成后执行代码
    window.addEventListener( "load", main );

    function main() {
      // 选择SVG元素
      const svg = d3.select("#chart");

      // 添加一个圆形
      svg.append("circle")
        .attr("cx", 250)
        .attr("cy", 150)
        .attr("r", 50)
        .attr("fill", "blue")
        .attr("stroke", "black")
        .attr("stroke-width", 2);

      // 添加一个旋转的文本
      svg.append("text")
        .attr("x", 250)
        .attr("y", 150)
        .attr("text-anchor", "middle")
        .attr("fill", "white")
        .attr("transform", "rotate(30, 250, 150)")
        .text("Hello, SVG!");
    }
  </script>
</body>
</html>

在这个案例中，我们首先搭建了Web服务器，然后在HTML文档中引用了D3库。在JavaScript代码中，我们使用 d3.select 方法选择了SVG元素，然后分别添加了一个圆形和一个旋转的文本。圆形设置了圆心坐标、半径、填充颜色、轮廓颜色和轮廓宽度等属性，文本设置了位置、对齐方式、填充颜色和旋转变换等属性。

14. 常见问题及解决方法

在使用D3和SVG进行开发时，可能会遇到一些常见问题，下面为你总结并提供解决方法：
| 问题 | 描述 | 解决方法 |
| ---- | ---- | ---- |
| 跨域资源共享问题 | 浏览器阻止JavaScript代码加载其他资源 | 使用Web服务器，避免使用 file: 协议加载本地页面 |
| SVG元素不显示 | 可能是 fill 和 stroke 属性设置不当 | 确保 fill 和 stroke 属性正确设置，避免将 fill 设置为 none 而不更新 stroke 属性 |
| 文本换行问题 | <text> 元素不支持自动换行 | 使用多个 <text> 元素构建多行文本 |
| 样式信息丢失 | 使用 svgcairo 转换SVG文件时样式信息丢失 | 确保 csstiny 和 cssselect 模块存在 |

15. 性能优化建议

为了提高D3和SVG应用的性能，可以考虑以下几点建议：
- 减少DOM操作 ：频繁的DOM操作会影响性能，尽量批量操作DOM元素，避免在循环中频繁添加或删除元素。
- 优化SVG元素 ：避免使用过于复杂的 <path> 元素，尽量使用预定义的简单形状标签。
- 压缩文件 ：使用 d3.min.js 等压缩版的库文件，减少文件下载大小。
- 使用缓存 ：对于一些不变的数据或计算结果，可以使用缓存来避免重复计算。

16. 未来发展趋势

随着Web技术的不断发展，D3和SVG也在不断演进。未来，我们可以期待以下发展趋势：
- 更好的兼容性 ：随着浏览器对SVG和D3的支持不断完善，兼容性问题将越来越少。
- 更多的交互功能 ：D3和SVG将支持更多复杂的交互功能，如手势识别、动画效果等。
- 与其他技术的融合 ：D3和SVG可能会与人工智能、机器学习等技术融合，创造出更强大的可视化应用。

通过对D3开发环境搭建、相关工具、SVG特性、实际案例、常见问题解决方法、性能优化建议以及未来发展趋势的介绍，相信你对D3和SVG有了更深入的了解。在实际开发中，不断实践和探索，你将能够利用D3和SVG创造出更加精彩的数据可视化作品。