course-center/languages/zh/tools/d3js-tutorial

D3.js 是一个强大的 JavaScript 库，用于数据可视化。以下是一个简单的 D3.js 教程，帮助您开始使用这个库。

D3.js 简介

D3.js 允许您将数据绑定到 DOM 元素上，并使用数据来驱动 DOM 的更新。这使得 D3.js 成为创建交互式数据可视化应用的理想选择。

安装 D3.js

首先，您需要将 D3.js 添加到您的项目中。您可以从 D3.js 官网下载最新版本的 D3.js。

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

创建基础图表

以下是一个简单的示例，展示了如何使用 D3.js 创建一个条形图。

// 设置 SVG 容器
const svg = d3.select("svg")
  .attr("width", 500)
  .attr("height", 300);

// 创建数据
const data = [30, 80, 45, 60];

// 创建比例尺
const xScale = d3.scaleLinear()
  .domain([0, d3.max(data)])
  .range([0, 500]);

// 创建 Y 轴
const yScale = d3.scaleLinear()
  .domain([0, d3.max(data)])
  .range([300, 0]);

// 绘制条形图
svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", (d, i) => xScale(i))
  .attr("y", d => yScale(d))
  .attr("width", d => xScale(1))
  .attr("height", d => 300 - yScale(d))
  .attr("fill", "blue");

学习更多

如果您想深入学习 D3.js，可以访问我们的 D3.js 进阶教程。