D3.js 转换 API 完整参考

D3.js 是一个数据可视化框架，它的转换 API 可以将输入数据转换成输出数据，以便进行可视化。本文将对 D3.js 转换 API 进行详细介绍。

转换 API 概述

D3.js 转换 API 将输入数据转换成输出数据，这些输出数据可以被 D3.js 可视化模块使用。转换 API 独立于 D3.js 可视化模块，因此可以用于各种不同类型的数据可视化项目。

D3.js 转换 API 分为两类：基本转换和复合转换。

• 基本转换：将输入数据转换为输出数据。
• 复合转换：将一个或多个基本转换组合在一起，以便将输入数据转换成更复杂的输出数据。

基本转换

d3.merge(arrays)

将数组合并成一个单一的数组，返回结果。

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const merged = d3.merge([arr1, arr2]);
// output: [1, 2, 3, 4, 5, 6]

d3.range([start,] stop[, step])

生成一个包含一系列数字的数组，返回结果。

const range = d3.range(0, 10, 2);
// output: [0, 2, 4, 6, 8]

d3.pairs(array)

将数组中相邻的元素成对返回，返回结果。

const pairs = d3.pairs([1, 2, 3, 4]);
// output: [[1, 2], [2, 3], [3, 4]]

d3.permute(array, indexes)

根据给定的索引数组从输入数组中返回指定的元素，返回结果。

const input = ["a", "b", "c"];
const output = d3.permute(input, [2, 0, 1]);
// output: ["c", "a", "b"]

d3.shuffle(array)

返回随机排序的输入数组的副本，返回结果。

const input = [1, 2, 3, 4, 5];
const shuffled = d3.shuffle(input);
// example output: [2, 4, 5, 1, 3]

d3.nest()

可以根据给定的键或函数将输入数据分组为块，返回一个嵌套的对象。

const data = [
  { name: "Alice", age: 21, city: "New York" },
  { name: "Bob", age: 25, city: "New York" },
  { name: "Charlie", age: 21, city: "San Francisco" }
];

const nested = d3.nest()
  .key((d) => d.age)
  .entries(data);

console.log(nested);
// output:
// [
//   {
//     "key": 21,
//     "values": [
//       { "name": "Alice", "age": 21, "city": "New York" },
//       { "name": "Charlie", "age": 21, "city": "San Francisco" }
//     ]
//   },
//   {
//     "key": 25,
//     "values": [
//       { "name": "Bob", "age": 25, "city": "New York" }
//     ]
//   }
// ]

复合转换

d3.histogram()

计算一组连续的标准化整数值的频率，返回结果。

const data = [1, 3, 3, 4, 6, 8];
const histogram = d3.histogram()
  .domain([0, 10])
  .thresholds(d3.range(0, 11))
  (data);

console.log(histogram);
// output:
// [
//   { x0: 0, x1: 1, length: 0 },
//   { x0: 1, x1: 2, length: 1 },
//   { x0: 2, x1: 3, length: 0 },
//   { x0: 3, x1: 4, length: 2 },
//   { x0: 4, x1: 5, length: 0 },
//   { x0: 5, x1: 6, length: 1 },
//   { x0: 6, x1: 7, length: 0 },
//   { x0: 7, x1: 8, length: 1 },
//   { x0: 8, x1: 9, length: 0 },
//   { x0: 9, x1: 10, length: 0 }
// ]

d3.stack()

计算在多个序列之间的堆叠位置，返回结果。

const series1 = [
  { year: 2000, value: 10 },
  { year: 2001, value: 20 },
  { year: 2002, value: 15 }
];

const series2 = [
  { year: 2000, value: 20 },
  { year: 2001, value: 10 },
  { year: 2002, value: 25 }
];

const stack = d3.stack()
  .keys(["value"])
  .order(d3.stackOrderNone)
  .offset(d3.stackOffsetNone);

const stackedData = stack([series1, series2]);

console.log(stackedData);
// output:
// [
//   [{y: 0, y0: 0}, {y: 20, y0: 10}, {y: 15, y0: 30}],
//   [{y: 20, y0: 0}, {y: 10, y0: 20}, {y: 25, y0: 15}]
// ]

结论

本文对 D3.js 转换 API 进行了简要介绍，并提供了一些基本和复合转换的示例。转换 API 提供了丰富的功能，使得 D3.js 在数据可视化的领域仍然非常有用。如果您需要更多的信息，请参考 D3.js 官方文档或参考书籍。