d3
d3
D3.js（Data-Driven Documents）是一个基于数据操作文档的JavaScript库，广泛应用于数据可视化领域。它结合了HTML、SVG和CSS等Web标准技术，能够通过数据驱动的方式操作DOM元素，创建动态和交互式的可视化效果。
以下是D3.js中一些常用的方法及其功能介绍：
1. 选择元素
D3.js通过选择器来操作DOM元素，常用的选择器包括：
d3.select()：选择单个元素。 1
| var svg = d3.select("svg");
|
d3.selectAll()：选择多个元素。 1
| var circles = d3.selectAll("circle");
|
2. 数据绑定
D3.js的核心功能之一是数据绑定，通过data()方法将数据与DOM元素关联起来。
- 绑定数据：
1
2
3
4
5
6
7
8
| var data = [10, 20, 30, 40, 50];
var circles = svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", (d, i) => i * 50 + 25)
.attr("cy", 25)
.attr("r", d => d);
|
- 动态数据处理：使用
enter()、update()和exit()来处理动态数据。
3. 设置属性和样式
D3.js提供了丰富的接口来设置DOM元素的属性和样式。
- 设置属性：
1
2
3
| circles.attr("cx", (d, i) => i * 50 + 25)
.attr("cy", 25)
.attr("r", d => d);
|
- 设置样式：
1
2
| circles.style("fill", "blue")
.style("stroke", "black");
|
4. 事件监听
D3.js支持强大的事件处理功能，通过on()方法可以监听各种事件。
- 基本事件监听：
1
2
3
4
5
6
| circles.on("mouseover", function(event, d) {
d3.select(this).style("fill", "red");
})
.on("mouseout", function(event, d) {
d3.select(this).style("fill", "blue");
});
|
5. 动画和过渡
D3.js提供了丰富的动画和过渡效果，通过transition()方法可以实现元素的动态变化。
- 基本过渡：
1
2
3
4
| circles.transition()
.duration(1000)
.attr("r", d => d * 2)
.style("fill", "green");
|
6. 加载外部数据
D3.js可以方便地加载和处理外部数据源，如CSV、JSON等格式。
- 加载CSV数据：
1
2
3
| d3.csv("data.csv").then(function(data) {
});
|
- 加载JSON数据：
1
2
3
| d3.json("data.json").then(function(data) {
});
|
7. 力导向图
D3.js的d3-force模块提供了一种基于物理模拟的布局方式，广泛应用于社交网络分析、知识图谱等场景。
- 核心物理力：
- 向心力（
d3.forceCenter）：使节点聚集到画布中心。 1
2
| const simulation = d3.forceSimulation(nodes)
.force("center", d3.forceCenter(width / 2, height / 2));
|
- 碰撞检测（
d3.forceCollide）：防止节点重叠。 1
2
| const simulation = d3.forceSimulation(nodes)
.force("collide", d3.forceCollide().radius(d => d.size + 5));
|
- 弹簧力（
d3.forceLink）：模拟节点间的连接关系。 1
2
| const simulation = d3.forceSimulation(nodes)
.force("link", d3.forceLink(links).distance(100).strength(0.5));
|
8. 常见应用场景
D3.js广泛应用于以下领域：
- 数据报表：创建柱状图、折线图、饼图等。
- 交互式可视化：支持用户交互和数据筛选。
- 地理信息可视化：绘制地图和地理数据。
D3.js的强大之处在于其灵活的数据绑定机制和对DOM元素的高效操作能力，能够轻松处理动态变化的数据，并实时更新界面。
svg
在JavaScript中操作SVG（可缩放矢量图形）是一种常见的数据可视化和图形绘制方法。SVG是一种基于XML的标记语言，用于描述二维矢量图形。通过JavaScript，可以动态地创建、修改和操作SVG元素，实现复杂的图形效果和交互功能。以下将详细介绍如何使用JavaScript操作SVG，包括基础概念、常用方法和一些实用示例。
1. SVG基础
SVG是一种基于XML的矢量图形格式，具有以下特点：
- 矢量图形：SVG图形由几何形状（如圆形、矩形、路径等）组成，可以无限放大而不失真。
- 可交互性：SVG元素可以绑定JavaScript事件，实现交互功能。
- 可嵌入性：SVG可以直接嵌入HTML文档中，也可以作为独立文件引用。
SVG的基本结构如下：
1
2
3
| <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
</svg>
|
2. 使用JavaScript操作SVG
2.1 创建SVG元素
可以通过JavaScript动态创建SVG元素，并将其添加到HTML文档中。
1
2
3
4
5
6
7
|
const svgNS = "http://www.w3.org/2000/svg";
const svg = document.createElementNS(svgNS, "svg");
svg.setAttribute("width", "200");
svg.setAttribute("height", "200");
document.body.appendChild(svg);
|
2.2 添加图形元素
SVG支持多种图形元素，如矩形（<rect>）、圆形（<circle>）、椭圆（<ellipse>）、路径（<path>）等。
示例：添加一个矩形
1
2
3
4
5
6
7
| const rect = document.createElementNS(svgNS, "rect");
rect.setAttribute("x", "10");
rect.setAttribute("y", "10");
rect.setAttribute("width", "100");
rect.setAttribute("height", "50");
rect.setAttribute("fill", "blue");
svg.appendChild(rect);
|
示例：添加一个圆形
1
2
3
4
5
6
| const circle = document.createElementNS(svgNS, "circle");
circle.setAttribute("cx", "100");
circle.setAttribute("cy", "100");
circle.setAttribute("r", "50");
circle.setAttribute("fill", "red");
svg.appendChild(circle);
|
示例：添加一个路径
1
2
3
4
5
| const path = document.createElementNS(svgNS, "path");
path.setAttribute("d", "M10,10 L150,10 L100,100 Z");
path.setAttribute("stroke", "black");
path.setAttribute("fill", "none");
svg.appendChild(path);
|
2.3 修改SVG元素
可以通过JavaScript动态修改SVG元素的属性。
示例：修改矩形的颜色
1
| rect.setAttribute("fill", "green");
|
示例：动态调整圆形的半径
1
| circle.setAttribute("r", "70");
|
2.4 添加交互功能
SVG元素可以绑定JavaScript事件，实现交互功能。
示例：鼠标悬停时改变颜色
1
2
3
4
5
6
| circle.addEventListener("mouseover", () => {
circle.setAttribute("fill", "yellow");
});
circle.addEventListener("mouseout", () => {
circle.setAttribute("fill", "red");
});
|
示例：点击时移动矩形
1
2
3
4
| rect.addEventListener("click", () => {
const x = parseInt(rect.getAttribute("x")) + 10;
rect.setAttribute("x", x);
});
|
3. 使用D3.js操作SVG
D3.js是一个基于SVG的可视化库，它提供了更简洁的API来操作SVG元素。以下是D3.js操作SVG的常用方法。
3.1 创建SVG容器
1
2
3
4
| const svg = d3.select("body")
.append("svg")
.attr("width", 200)
.attr("height", 200);
|
3.2 添加图形元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
svg.append("rect")
.attr("x", 10)
.attr("y", 10)
.attr("width", 100)
.attr("height", 50)
.attr("fill", "blue");
svg.append("circle")
.attr("cx", 100)
.attr("cy", 100)
.attr("r", 50)
.attr("fill", "red");
svg.append("path")
.attr("d", "M10,10 L150,10 L100,100 Z")
.attr("stroke", "black")
.attr("fill", "none");
|
3.3 动态绑定数据
D3.js的核心功能之一是数据绑定。通过data()方法可以将数据绑定到SVG元素上。
1
2
3
4
5
6
7
8
9
| const data = [10, 20, 30, 40, 50];
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", (d, i) => i * 30 + 20)
.attr("cy", 50)
.attr("r", d => d)
.attr("fill", "purple");
|
3.4 添加交互功能
D3.js也支持事件监听，可以为SVG元素添加交互功能。
1
2
3
4
5
6
7
| svg.selectAll("circle")
.on("mouseover", function(event, d) {
d3.select(this).attr("fill", "yellow");
})
.on("mouseout", function(event, d) {
d3.select(this).attr("fill", "purple");
});
|
4. SVG与Canvas的对比
SVG和Canvas是两种常见的图形绘制技术，各有优缺点：
- SVG：
- 优点：矢量图形，可无限放大不失真；支持CSS和JavaScript交互；可嵌入HTML。
- 缺点：复杂图形时性能可能下降；不适合像素级操作。
- Canvas：
- 优点：像素级操作，适合复杂图形和游戏；性能较好。
- 缺点：位图，放大后会失真；不支持DOM操作。
5. 实用示例：动态柱状图
以下是一个使用D3.js和SVG绘制动态柱状图的示例。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Bar Chart</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
<script>
const data = [10, 20, 30, 40, 50];
const width = 400;
const height = 300;
const svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
const bars = svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", (d, i) => i * 50 + 20)
.attr("y", d => height - d * 5)
.attr("width", 40)
.attr("height", d => d * 5)
.attr("fill", "steelblue");
bars.on("mouseover", function(event, d) {
d3.select(this).attr("fill", "orange");
})
.on("mouseout", function(event, d) {
d3.select(this).attr("fill", "steelblue");
});
</script>
</body>
</html>
|
6. 总结
SVG是一种强大的矢量图形格式，可以通过JavaScript和D3.js进行动态操作。它适用于数据可视化、图表绘制和交互式图形设计。通过掌握SVG的基本元素和操作方法，你可以创建出复杂而美观的图形效果。