D3.js 教程指南

D3.js 是一个强大的 JavaScript 库，用于数据可视化。本教程将带你入门，了解如何使用 D3.js 创建交互式图表。

基础概念

SVG: D3.js 主要使用 SVG (Scalable Vector Graphics) 来创建图表。
DOM: D3.js 通过操作 DOM 来更新和渲染图表。

快速开始

引入 D3.js 库：将以下代码添加到 HTML 文件的 <head> 部分。
```
<script src="https://d3js.org/d3.v6.min.js"></script>
```
创建 SVG 容器：在 HTML 文件中添加一个 SVG 容器。
```
<svg width="500" height="300"></svg>
```

使用 D3.js 添加数据：使用 D3.js 的数据绑定功能将数据添加到 SVG 容器中。

const data = [30, 80, 45, 60];
const svg = d3.select("svg");
svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("width", d => d * 10)
  .attr("height", 10)
  .attr("y", (d, i) => i * 15)
  .attr("x", 50);

进阶内容

交互式图表：使用 D3.js 的交互功能，如鼠标事件和拖拽。
动画：使用 D3.js 创建动画效果，使图表更加生动。

D3.js 示例图表

更多进阶内容，请参考 D3.js 官方文档。

总结

D3.js 是一个功能强大的数据可视化工具，可以帮助你创建各种类型的图表。通过本教程，你了解了 D3.js 的基础概念和快速开始方法。希望你能进一步探索 D3.js 的更多可能性。