D3.js 基础教程：入门数据可视化 📊💻

D3.js（Data-Driven Documents）是一个基于JavaScript的可视化库，能帮助开发者用HTML、CSS和SVG创建动态、交互式的数据可视化。以下是入门指南：

1. 安装与环境准备

引入库：通过CDN或本地文件引入D3.js

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

开发工具：推荐使用 VS Code 或 Chrome DevTools 调试
学习资源：D3.js 官方文档是最权威的参考资料

2. 第一个D3.js示例：简单条形图

<!DOCTYPE html>
<html>
  <body>
    <script>
      const data = [30, 50, 80, 120, 150];
      d3.select("body")
        .selectAll("div")
        .data(data)
        .enter()
        .append("div")
        .style("width", d => d + "px")
        .style("height", "20px")
        .style("background-color", "steelblue");
    </script>
  </body>
</html>

d3js_bar_chart

3. 核心概念

数据绑定：使用 .data() 方法将数据与DOM元素关联
动态更新：通过 .enter()、.update()、.exit() 控制元素生命周期
交互功能：添加悬停提示（mouseover）、点击事件（click）等
SVG操作：直接操作SVG元素创建复杂图形（如饼图、折线图）

4. 实用技巧

使用 d3.csv 加载外部数据文件
通过 scale函数实现数据到视觉的映射
探索力导向图等高级图表类型

5. 进阶学习

想深入了解D3.js进阶技巧？请访问 /d3js_advanced 查看更复杂的案例与优化方法！