在我担任 SharePoint 开发人员期间，D3 和 Dimple 已在各种图形和图表应用程序中派上用场。本文将（重新）向您介绍 D3 和 Dimple，并简要讨论将它们结合使用的好处。本文的最终目的是解释 Dimple 如何简化一些晦涩难懂的 D3 构造。

在上一篇文章《使用 D3、Dimple 和 SharePoint 创建出色的可视化效果》中，我概述了 D3（代表数据驱动文档）和 Dimple 对 SharePoint 可视化项目有用的一些原因。让我总结一些要点。

首先，我之前的文章中给出了一个定义：“D3 是一个 JavaScript 库，用于在 Web 浏览器中生成动态、交互式数据可视化。它利用了广泛实施的 SVG、HTML5 和 CSS 标准。它是早期 Protovis 框架的继承者。

要了解有关这项技术的更多信息，让我们看看D3 主页上的内容：D3 允许您将任意数据绑定到文档对象模型 (DOM)，然后对文档应用数据驱动的转换。例如，您可以使用 D3 从数字数组生成 HTML 表。或者，使用相同的数据创建具有平滑过渡和交互的交互式 SVG 条形图。

D3 不是一个试图提供所有可能功能的单片框架。相反，D3 解决了问题的关键：基于数据高效地处理文档。这避免了专有表示，并提供了非凡的灵活性，充分发挥了 HTML、SVG 和 CSS 等 Web 标准的全部功能。D3 的开销极小，速度极快，支持大型数据集和动态行为，以实现交互和动画。D3 的函数式风格允许通过各种官方和社区开发的模块重用代码。

网络上有许多 D3 示例。谷歌搜索“D3 示例”应该会找到包含数千个示例的网站！下面展示了一些视觉作品，由 Christopher Viau 的画廊提供。

Christopher Viau 画廊

D3 图表和图形已经渗透到互联网，用于从体育运动到总统竞选等各种主题的交互式图形显示。

甚至填字游戏单词图表也基于 D3 布局和代码：

D3 字图

此外，交互式统计地图和人口研究都在 d3 代码中找到了肥沃的家园 - 只需在 Google 上搜索“交互式 D3 地图”并选择图像即可：

Dimple 是另一种编程语言，其唯一目的是简化 D3。Dimple 的主站点 https://dimplejs.org 对此进行了更为雄辩的阐述：“Dimple 的目标是向分析师开放 d3 的强大功能和灵活性。它旨在提供平缓的学习曲线和最少的代码来实现一些富有成效的工作。它还公开了 d3 对象，以便您可以拾起它们并运行它们来创建一些非常酷的东西。”

在离开 D3 和 Dimple 之前，值得注意的是，它们都来自部分源自 jQuery 的语言，而 jQuery 又基于 JavaScript。

1. D3 和​​ Dimple 是免费的。
2. 网络上有大量的示例和文档。
3. D3 和​​ Dimple 都具有源自 jQuery 的库——因此 jQuery 和 JavaScript 程序员应该熟悉其语法。
4. 这两种语言都使用文档对象模块 (DOM)。因此，它们可以构建复杂的 HTML 结构并响应事件。
5. 由于这两个库都绑定了实际的 DOM 元素，因此产生了非常详细的工具提示。
6. D3 库具有出色的日期和时间功能（与 Momentjs.com 相比）

D3 制作的一些每日热图按周和日显示了多年内的每一天：

现在已经介绍了主要参与者 D3 和 Dimple，让我们对它们进行试驾。

我们将比较用 Dimple 编写的小折线图和用原生 D3 编写的相同基本功能。

但在实际比较之前，让我们对 Dimple 代码中会遇到的情况设定一些期望，因为 Dimple 的目的是简化 D3。

我们应该从 Dimple 代码中期待以下内容：• 更少的代码 • 简化的例程 • 统一的 CSS 元素类标签

逐行检查完 Dimple 代码后，我们将探索代码创建的 DOM 元素。为此，我们将使用 Chrome 开发人员工具查看生成的结构。D3 代码需要创建类似的结构才能实现相同的功能。

为了进行比较，我选择了两个简单的折线图，一个用 Dimple 制作，另一个用原生 D3 制作。我的比较代码示例可以从 https://github.com/sonisick/d3anddimpleexamples https://goo.gl/Vm4Frc 下载。下载 zip 文件并解压。代码可在任何现代浏览器中运行。

排行榜竞争者

不算令人印象深刻的场景——但你总得有个开始。即使在这个阶段，有一件事需要注意，Dimple 也想展示它的东西：只需将光标缓慢移到 Dimple 情节线上，你就会看到下面描述的现象：

Dimple 对数据充满热情！

现在让我们来看看酒窝密码。

两者的数据均来自每个图表样本中名为 data 的内部变量。变量 data 只是一个 JSON 对象：

两个示例的 JSON 数据

上述变量对象包含在一个开始和结束脚本标记<script>中，这样当我们集中精力于主要编码例程时，该部分可以折叠起来。CSS 样式标记也将折叠起来，仅在需要时引用。

折叠数据部分和 CSS 样式后，代码非常简洁，实际的 Dimple 代码只有九行：

第一个酒窝示例

在折叠的 CSS 样式之后，我们在第 22 行和第 23 行看到两个引用 D3 和 Dimple 库的脚本标记。D3 引用始终列在 Dimple 引用之前，因为辅助 Dimple 库依赖于 D3 库的存在。此外，有必要将正确的 D3 版本与特定的 Dimple 版本进行协调。由于我们使用的是 D3 v4 库，因此我们需要 Dimple v2.3 库。

在第 25 行的 Body 标签之后，我们看到一个图表标题。

第 28 行向我们展示了 JSON 数据变量的折叠脚本标签。

接下来，在打开的 Script 标签之后，我们有了 Dimple 代码。

第 66 行只是创建了一个新的 SVG 元素，其尺寸为宽度 900 像素、高度 500 像素。

Dimple 默认为图表的绘图区分配一个高度为 80%、宽度为 80% 的区域。剩余空间用于轴、轴标签和填充。

第 67 行从 svg 变量和数据变量创建新的 Dimple 图表。第 68 行是我留下的注释，作为在 80% 的默认值不合适时格式化绘图区域的示例。命令是“myChart.setBounds”。您可以通过单击 API 参考链接来检查参数：(https://goo.gl/M2KhKt)。

第 69 行将 x 轴添加为时间轴。参数包括轴名称、日期列、输入格式（数据格式）和输出格式。最后一个参数是日期在轴上的格式。在此示例中，x 轴上的格式为“yy-mm”；例如，日期 1/1/2009 将格式化为 09-01。

（以下是 D3 时间格式文档的缩短 URL：https://goo.gl/wp8NGz）。

第 70 行明确打开 x 网格线。

第 71 行添加了 y 轴的测量轴。所需的参数只有轴名称和 y 列名称。

第 72 行明确打开 y 网格线。

第 73 行根据从我们的数据变量中提取的列创建线系列。

addSeries 命令有三个参数。第一个参数用于通过进一步剖析数据来创建多个系列。在当前示例中，第一个参数为 null。

第一个参数中使用非空值的一个例子是我为《SharePoint 2013、D3 和 Dimple 连接》(https://goo.gl/eqqXGT) 一书制作的多系列折线图。

数据包含两个独立系列：一个系列为生产运行，另一个系列为平均或理想运行。每个系列在图表上都生成一条线。

在同一个数据源中拥有多个系列称为分解或将数据进一步拆分为多个系列。

在上述多系列折线图中，addSeries 线如下所示：

var lines = myChart.addSeries("Run Type", dimple.plot.line, [x,y]); 文件中的数据通过第一个参数“Run Type”分成两个系列。结果是生成两条单独的线：一条用于运行类型“Prod”，另一条用于运行类型“Avg”。

第 73 行的第二个参数只是 Dimple 图形对象的名称——本质上是 Dimple Chart 类型。在此示例中，我们使用“dimple.plot.line”。

其他绘图对象是 dimple.plot.area、dimple.plot.bar 和 dimple.plot.bubble。每个对象都对应一个特定的 Dimple 图表。第三个参数表示创建组合唯一值（在本例中为线点）所需的值。这里我们使用来自 x 和 y 坐标的数据。

第 74 行设定了情节线的权重。

第 75 行是一条注释，用于说明如何打开线标记——稍后将详细介绍。

第 76 行实现了渲染图表的神奇效果。

在查看纯 D3 编码图之前，我们需要检查 Dimple 在文档对象模型 (DOM) 结构中创建的内容。为了进行检查，我们使用 Chrome 浏览器中的开发人员工具。

所有现代浏览器都有类似的调试器或开发工具。我发现 Chrome 使用起来更方便。Chrome 开发工具我最喜欢的一点是，当您将鼠标悬停在 DOM 对象上或单击该对象时，该工具会突出显示 HTML 元素在屏幕上占据的区域。在接下来的屏幕中，我们将展示许多突出显示 HTML 对象区域的实例。

此阶段的目标是查看 Dimple 自动创建的结构。我们将重点关注的主要结构是 HTML 组元素。组元素是一个容器对象，在呈现的 HTML 中不直接可见。它将功能元素组合在一起。

当我们查看原始 D3 代码时，我们将看到需要更多的编码工作来创建这些组对象，而 Dimple 可以轻松提供这些对象。

要打开开发者工具，请使用 F12 键或按 Control Shift 和“I”组合键。另外，请确保已打开“元素”选项卡，因为这是我们探索的重点。

首先，将光标悬停在 SVG 标签上或单击它，您应该会看到整个图表区域呈蓝色，并且 svg 标签显示在顶部：

接下来，单击打开 SVG 标签上的三角箭头以显示第一个组标签。将鼠标悬停在类为 dimple-chart 的 Group 元素上或单击该元素。您的屏幕应类似于以下内容：

类似地，使用 dimple-chart 类打开 Group 标签以显示另外三个组：

这些组分别对应于网格线、轴和系列。网格线和轴都延伸到整个图表区域，而系列仅延伸到实际线经过的区域。请注意，当您将鼠标悬停在每个组上或单击每个组时，顶部会显示标签：

现在打开 dimple-gridlines-group 下的第一个组。这应该会显示另外两个组。一个用于垂直线，另一个用于水平线：

我们将仅探索包含垂直线或刻度的第一组。现在单击以打开第一个凹坑网格线子组：

当我们将光标移到垂直刻度或线条组上时，我们可以看到每个垂直网格线都依次用标签指出：