「数据可视化 D3系列」入门第一章：Hello D3.js

Hello D3.js

一、初识D3.js：用JavaScript操控DOM

D3.js（Data-Driven Documents）是一个强大的JavaScript库，它让我们能够用数据驱动文档的变换。让我们从一个简单的"Hello World"示例开始，逐步探索D3的核心概念。

二、用D3操作DOM

👇 代码示例

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>D3.js入门 - Hello World</title>
  <script src="https://d3js.org/d3.v7.min.js"></script>
  <style>
    body {
      font-family: 'Microsoft YaHei', sans-serif;
      padding: 20px;
      background-color: #f5f5f5;
    }
    h3 {
      color: #2c3e50;
      margin: 10px 0;
      padding: 8px;
      background-color: #ecf0f1;
      border-left: 4px solid #3498db;
    }
  </style>
</head>
<body>
  <h1>D3.js入门示例</h1>
  <div id="poem-container">
    <h3></h3>
    <h3></h3>
    <h3></h3>
    <h3></h3>
  </div>
</body>
<script>
  // 使用D3选择所有h3元素并设置文本内容
  const poemLines = [
    "日照香炉生紫烟",
    "遥看瀑布挂前川",
    "飞流直下三千尺",
    "疑是银河落九天"
  ];
  
  // 方法1：直接选择并设置文本
  d3.selectAll("h3")
    .text((d, i) => poemLines[i]);
  
  // 方法2：使用数据绑定（更D3的方式）
  d3.selectAll("h3")
    .data(poemLines)
    .text(d => d);
  
  // 添加一些交互效果
  d3.selectAll("h3")
    .on("mouseover", function() {
      d3.select(this)
        .style("background-color", "#bdc3c7")
        .style("color", "white");
    })
    .on("mouseout", function() {
      d3.select(this)
        .style("background-color", "#ecf0f1")
        .style("color", "#2c3e50");
    });
</script>
</html>

👇 运行效果：

代码解析

D3的选择器

d3.select("selector") - 选择第一个匹配元素
d3.selectAll("selector") - 选择所有匹配元素

数据绑定
D3的核心思想是数据驱动：

js 复制代码

d3.selectAll("h3")
  .data(poemLines)  // 绑定数据
  .text(d => d);    // 使用数据

链式调用
D3采用了流畅接口设计，允许方法链式调用：

js 复制代码

d3.selectAll("h3")
  .data(data)
  .text(d => d)
  .style("color", "red");

三、D3.js与jQuery的异同

看着上述写法是不是与jQuery比较像呢？下面看看他们之间的区别吧

特性	D3.js	jQuery
目的	数据可视化	DOM操作/AJAX
数据绑定	核心功能	无专门机制
动画	基于数据的过渡	基础动画效果
SVG支持	强大	有限

四、下一步学习

在下一章中，我们将深入探讨：

选择元素
绑定数据

"D3不是图表库，而是数据与DOM绑定的强大工具。" - Mike Bostock(D3.js创始人)