D3.js 教程

D3.js 是一个强大的 JavaScript 库，用于进行数据可视化。本教程将带您了解 D3.js 的基本使用方法和技巧。

D3.js 允许你使用 HTML5 SVG 和 Canvas 来创建动态的数据可视化。以下是一些基本步骤，用于开始使用 D3.js：

1. 安装和设置

首先，您需要在项目中包含 D3.js。您可以从 D3.js 官网 下载最新的版本。

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

2. 创建基本 SVG 图形

使用 D3.js，您可以轻松创建各种 SVG 图形。以下是一个简单的例子：

const svg = d3.select("body").append("svg")
  .attr("width", 500)
  .attr("height", 300);

svg.append("circle")
  .attr("cx", 100)
  .attr("cy", 100)
  .attr("r", 50)
  .style("fill", "blue");

SVG Circle

在上面的代码中，我们创建了一个蓝色的圆圈。

3. 数据绑定

D3.js 允许您将数据绑定到 DOM 元素上。以下是一个将数据绑定到 SVG 点的例子：

const data = [30, 50, 70, 80, 100];

const circles = svg.selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  .attr("cx", d => d * 10)
  .attr("cy", 150)
  .attr("r", 5)
  .style("fill", "red");

Data-Bound Circles

在上面的代码中，我们创建了一个包含 5 个圆圈的 SVG，每个圆圈的 x 坐标都是数据数组中对应值的 10 倍。

4. 动画

D3.js 允许您对数据进行动画处理。以下是一个简单的例子，展示如何对圆圈进行动画：

circles.transition()
  .duration(1000)
  .attr("cx", d => d * 10 + 100)
  .attr("cy", 100);

Animated Circles

在上面的代码中，圆圈将向右移动 100 个单位，并在 1000 毫秒内完成动画。

希望这个简单的教程能帮助您开始使用 D3.js。如果您想了解更多关于 D3.js 的信息，请访问 D3.js 官方文档。

# 总结

通过本教程，您应该已经对 D3.js 有了一定的了解。这是一个非常强大的库，可以用于创建各种数据可视化。如果您想了解更多关于 D3.js 的内容，请访问我们的 [D3.js 进阶教程](/en/docs/d3js/advanced)。