D3.js 获取 API 完整参考

D3.js 是一个基于数据的 JavaScript 库，用于帮助开发人员创建复杂的交互式数据可视化。它提供了一系列的操作数据的 API 以及强大的图形绘制能力。本文将给您介绍 D3.js 的常用 API 并提供完整的参考文档。

安装

D3.js 可以通过 npm 安装：

npm install d3

也可以直接使用 CDN 引入：

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

选择元素

D3.js 提供了许多选择器（selector），可以帮助您定位 HTML 或 SVG 元素，例如：

• d3.select(selector)：选取第一个匹配元素
• d3.selectAll(selector)：选取所有匹配元素

// 选取 id 为 "my-svg" 的 SVG 元素
const svg = d3.select("#my-svg");

详细文档请参考选择器。

绑定数据

在 D3.js 中，我们可以将数据与元素绑定，然后根据数据的变化动态更新元素的属性或内容。数据可以是数组、对象等形式。

• selection.data(data[, key])：将 data 数组与当前选中的元素绑定，并返回一个包含了“连接”、“退出”、“更新”状态的新的 selection。key 参数可选。

const data = [1, 2, 3, 4, 5];

const circle = svg.selectAll("circle")
  .data(data)
  .join("circle")
    .attr("cx", (d) => d * 50)
    .attr("cy", 50)
    .attr("r", 20)
    .attr("fill", "steelblue");

详细文档请参考数据绑定。

缓动和过渡

通过使用 D3.js 的缓动和过渡功能，我们可以为绑定数据的元素添加一些动画效果，例如移动、旋转、缩放等。

• selection.transition([name])：创建一次过渡（transition），并返回包含了“进入”、“过渡”状态的新的 selection。name 参数可选。
• transition.duration([duration])：设置过渡时间，单位为毫秒。
• transition.delay([delay])：设置过渡延迟时间，单位为毫秒。
• transition.ease([ease])：设置过渡缓动函数（easing function）。

// 移动圆形
circle.transition()
  .duration(1000) // 过渡时间为 1 秒
  .attr("cx", (d) => d * 50 + 50);

// 修改颜色
circle.transition()
  .duration(1000)
  .delay(1000) // 延迟 1 秒后开始过渡
  .attr("fill", "orange")
  .transition()
  .duration(1000)
  .delay(1000)
  .attr("fill", "steelblue")
  .transition()
  .duration(1000)
  .delay(1000)
  .attr("fill", "orange")
  .transition()
  .duration(1000)
  .delay(1000)
  .attr("fill", "steelblue");

详细文档请参考过渡和缓动。

支持的图形

D3.js 支持众多的图形类型，包括常见的条形图、折线图、散点图、饼图等：

• 条形图：d3.scaleBand, d3.scaleLinear, selection.append("rect")
• 折线图：d3.scaleTime, d3.line, selection.append("path")
• 散点图：d3.scaleLinear, selection.append("circle")
• 饼图：d3.pie, selection.append("path").attr("d", arc)

详细的图形绘制方式请参考D3.js 官方示例库。

参考文档

D3.js 拥有非常丰富的 API 文档，在此引用官方地址，建议开发者将其下载到本地以方便查看：

• D3 7.0 API Reference

结语

本文对 D3.js 常用的 API 进行了简单介绍，希望对新手开发者有所帮助。D3.js 库虽然功能强大，但要学好还需要大量的实践和研究。祝各位开发者学习愉快！