子弹图结构简介

我最早接触到的 D3.js 示例之一（当时还是 Protovis 的时代）是带有子弹图（或称子弹图表）的例子。

它立刻让我觉得这是一种优雅的数据呈现方式，能够直接传递信息并提供上下文背景。

子弹图的设计规范由 Stephen Few 在其与 Perceptual Edge 的合作中提出。

图表组件

根据该规范，我们可以将图表的组成部分分解如下：

• 文本标签：
  标识所表示的性能指标。

• 定量刻度：
  类似于二维 x,y 图表中 x 轴上的刻度，是一种量化的参照尺度。

• 性能度量：
  图表中展示的主要数据。在此例中，表示 CPU 的运行频率。

• 对比标记：
  用于标识某个参考值的符号，例如前一天的最高值（或其他类似参考值）。

• 定性区间：
  代表不同等级的范围，如低、中、高，或差、满意、好。为保证可读性，理想情况下应不少于两个且不多于五个这样的区间。

理解这一图表规范非常有用，因为它的结构也体现在图表数据的组织方式上。

例如，在当前示例中，数据可以以 JSON 格式表示如下：

1[
2  {
3    "title":"CPU 1 负载",
4    "subtitle":"GHz",
5    "ranges":[1500,2250,3000],
6    "measures":[2200],
7    "markers":[2500]
8  }
9]

在这里，我们可以清晰地看到图表所需的所有组成部分，这些数值将被加载到我们的 D3 脚本中进行显示。