快速入门

DataSet 的目标是为数据可视化场景提供状态驱动（state driven）的、丰富而强大的数据处理能力。

术语表

简介

DataSet 作为数据处理模块，为数据可视化中数据预处理环节提供了强大的功能。首先我们把数据处理分为两个大的步骤：数据连接（Connector）和数据转换（Transform）。Connector 负责导入和归一化数据（譬如导入 CSV 数据，导入 GeoJSON 数据等），Transform 负责进行各种数据转换操作（譬如图布局、数据统计、数据补全等）。通过这样的分层，支持了前端社区非常全面的数据处理相关的算法和模块。其次，我们在单个数据视图（DataView）的基础上增加了数据集（DataSet）的概念，通过统一的 DataSet 管理，实现了各个数据视图之间的状态同步和交互。整个数据处理模块的架构如下图。

功能介绍

DataSet 主要完成了以下功能：

• 源数据的解析，将 CSV, DSV, GeoJSON 转成标准的 JSON，查看 Connector。

• 数据处理，查看 Transform：

  • 加工数据，包括 filter, map, fold(补数据) 等操作。
  • 统计函数，汇总统计、百分比、封箱 等统计函数。
  • 特殊数据处理，包括地理数据、矩形树图、桑基图、文字云 的数据处理。

安装

浏览器引入

可以通过 <script>标签引入在线资源或者本地脚本。

<!-- 引入在线资源 -->
<script src="https://unpkg.com/@antv/data-set"></script>

<!-- 引入本地脚本 -->
<script src="./data-set.js"></script>

这样，就可以在后续脚本中得到全局变量 DataSet。

<script src="https://unpkg.com/@antv/data-set"></script>
<script>
  const dv = new DataSet.DataView();
</script>

通过 npm 安装

我们提供了 DataSet 的 npm 包，可以通过下面的命令进行安装。

npm install @antv/data-set --save

安装后即可使用 import 或者 require 进行引用。

import { DataView } from '@antv/data-set';
const dv = new DataView();

使用示例

在下面的例子中，我们将使用 DataSet 模块计算数据集的平均身高和平均体重：

import DataSet from '@antv/data-set';
const data = [
  { gender: 'female', height: 161.2, weight: 51.6 },
  { gender: 'female', height: 167.5, weight: 59 },
  { gender: 'female', height: 159.5, weight: 49.2 },
  { gender: 'female', height: 157, weight: 63 },
  { gender: 'female', height: 155.8, weight: 53.6 },
  { gender: 'female', height: 170, weight: 59 },
  { gender: 'female', height: 159.1, weight: 47.6 },
  { gender: 'female', height: 166, weight: 69.8 },
  { gender: 'female', height: 176.2, weight: 66.8 },
  { gender: 'female', height: 160.2, weight: 75.2 },
  { gender: 'female', height: 172.5, weight: 55.2 },
  { gender: 'female', height: 170.9, weight: 54.2 },
  { gender: 'female', height: 172.9, weight: 62.5 },
];
const ds = new DataSet();
const dv = ds.createView().source(data);
dv.transform({
  type: 'aggregate',
  fields: ['height', 'weight'], // 统计字段集
  operations: ['mean', 'mean'], // 统计操作集
  as: ['avgHeight', 'avgWeight'],
});
// 统计结果以 JSON 数组的格式存储在 dv.rows 中
const { avgHeight, avgWeight } = dv.rows[0];
// 165.2923076923077, 58.97692307692308
console.log(avgHeight, avgWeight);