8、数据可视化中的生成器、组件与布局

数据可视化中的生成器、组件与布局

1. 布局概述

布局会使用数据集，并计算图形元素为以某种有意义的方式表示该数据集所需的像素坐标和角度。例如，它能处理分层数据集，并计算每个节点的像素坐标，以便将数据集表示为树形图。布局会返回一个可绑定到 Selection 的数据结构，但它们本身并不创建或放置任何图形元素，只是计算元素应放置的坐标，具体如何使用这些信息则由调用代码决定。

1.1 通用工作流程

这些辅助工具通常以函数对象的形式实现，一般的工作流程如下：
1. 创建所需辅助工具的实例。
2. 使用其成员函数根据需要进行配置（例如，为数据集指定访问器函数）。
3. 在适当的评估上下文中调用它。

通常，这三个步骤会合并为一步，例如在 attr() 、 call() 或 data() 调用中完成实例的创建、配置和评估。

2. 符号的使用

符号是预定义的形状，可用于表示图形（如散点图）中的各个数据点。下面介绍两种在 SVG 中创建符号的方法。

2.1 使用 D3 内置符号

D3 定义了七种内置符号类型，可通过 d3.symbol() 生成器使用。符号生成器与其他 D3 形状生成器有所不同，它不使用数据集，只能配置符号的类型和大小。所有符号都在原点渲染，需要使用 SVG 变换将它们移动到最终位置。

以下是一个使用 D3 内置符号的示例代码：