Codes►前端

d3

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
// 创建SVG元素
const svgNS = "http://www.w3.org/2000/svg"; // SVG命名空间
const svg = document.createElementNS(svgNS, "svg");
svg.setAttribute("width", "200");
svg.setAttribute("height", "200");
// 将SVG添加到页面
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的基本元素和操作方法，你可以创建出复杂而美观的图形效果。