尽管开发人员的初衷是好的，但项目的进展并不总是一帆风顺的。“目标是抽干沼泽，但鳄鱼却深陷其中”这句格言似乎是正确的。

掌握一门特定技术并不能让你成为专家——你只能成为一个雄心勃勃的学习者。我选择的任务是将 Dimple 中的多线图与 D3 图表进行比较，以突出 Dimple 的效率。由于 Dimple 来自 D3，我对我的分析所经历的曲折和复杂性感到惊讶。

本文的第二个目标是提供一个有意义的多线图示例。文章《D3 和 Dimple 代码的折线图比较》中探讨的图表过于简单，图表上只显示一条线。

折线图无疑是您最常看到的视觉效果。它告诉我们一切，从股票的高点和低点、地震次数和震级到月降雨量和年气温。

我是否已经第一百次提到过，我已经达到了减肥目标？

看到了吗？我甚至可以用折线图记录我的体重。事实上，我几乎每天都会与至少几张折线图互动。

我在研究中用到的是在封闭车辆内一小时内温度上升的数据。温度数据是从兽医协会的网站上摘录的。

去年，在我工作的地区，一名儿童死亡，这种事情的发生让我心神不宁。我不知道自己该如何面对这样的悲剧。更让我心神不宁的是，我把我的狗从日间营地接回来后，却忘在了车里。

值得庆幸的是，我的妻子立即询问迈克尔在哪里。我被无线电分散了注意力，而他是一名在 Camp Wags-A-Lot 冒险后疲惫不堪的士兵。迈克尔立即被救出，没有受到更严重的伤害。

无意的伤害同样致命。

由于不小心将儿童和动物关在炎热的汽车、SUV 或卡车中而导致死亡和受伤的人数惊人。我的目标是用一张有意义的图表来显示这些信息。

数据来自兽医协会

两张带有这些简单数字的相同图表应该足够简单了，对吧？两周后，我制作了以下比较：

酒窝图（左）与 D3 图（右）

这是小菜一碟，对吧？但愿如此。

在制作这两张图表的过程中，我曾多次走错路，走进死胡同。我的发现和探索是本文其余部分的基础，应该会为那些想要使用 Dimple 绘制数据图表的人提供启发。

对于接下来的 Dimple 挑战示例，我将通过使用“/ ”和“ /”注释掉执行某些更花哨格式的 CSS 部分，以禁用这些部分。

具体来说，ChartLabel 和 Background 周围的 CSS 将被注释掉，以便我们更加专注于 Dimple 和 D3 的功能。

此外，暂时我们将忽略网格线功能，而专注于创建类似大小的多线图的基础知识。

示例代码可从 Github.com 下载为 zip 文件。

解压 zip 文件后，示例应显示在连接到互联网的任何现代浏览器中。为获得最佳效果，请使用 Firefox。

您可能想要使用像 NotePad++ 这样的优秀编辑器来处理代码并保存更改的版本。

下图显示了两个图表。左侧是 Dimple 图表，右侧是 D3 图表。Dimple 图表中有一个部分，我用屏幕截图编辑器用黄色勾勒出了它的轮廓。

最初我期望两张图表的格式相似，x 轴和 y 轴都从零开始。由于我在 Dimple 文档中找不到“控制 y 轴的命令”，所以我咨询了 Google，并开始研究轴类型。

虽然阅读文档是件好事，而且是显而易见的一步，但您找到的示例很少能满足您的需求。

事实证明，我们的 Dimple 将 x 轴视为分类轴，尽管所有内容都是有序的。这不是我想要的比较，感觉就像 Dimple 的噱头。

如果我们看一下 Dimple 使用分类轴的其他示例（不一定是折线图），我们会发现分类轴更适用于产品、产品线和公司。它不适合分钟、小时或天等数字序列：

上图使用不带标签的分类轴。上面显示的两个示例均来自 dimplejs.org 上的高级示例。

所以，显然我使用了错误的轴类型；看来我们需要一个严格的数字轴来让两个图表对齐。好吧，既然实际值是以分钟为单位的，让我们试试时间轴。

感谢 Google 和 Stack Overflow 的帮助，这个问题得到了解决：

请注意，使用的数值是“年”。如果我们尝试使用“分钟”（也就是我们显示的分钟），图表最终会在“60”分钟标签中显示“0”，因为分钟的范围是 0-59。

以下代码段生成下图：

代码段在 x 轴上产生更理想的外观：

但是，我们还没有完成这张图表的修饰。在起始 y 值 80 下方有很多未使用的空间。我意识到我说过我希望 x 轴和 y 轴都从 0 开始，但如果我们将 y 轴的值调整为 80 以与 x 轴 0 相交，我们的数据将更加突出。

编程就是在运行中改变事物——有时你直到开始在项目中产生输出时才知道自己想要什么。幸运的是，我们需要对 Dimple 图表进行的调整是调整一个名为“overrideMin”的参数，该参数可在文档中找到：

y.覆盖最小值=80

因此，我们的新酒窝图如下所示：

由于y = 80以下的图表相同，因此我们的图表现在更具信息量且更引人注目。

现在我们已经考虑了图表的各个方面，我们可以分解我们使用的 Dimple 代码。

我们首先检查数据。脚本标签围绕着数据，这样我们就可以折叠各部分，以增加包含 Dimple 代码的部分的可见性。下图中显示的数据只是一小部分。要查看完整数据，请查阅从 Github.com 下载的源代码。

数据只是 JSON 对象数组。数据源被创建为内部对象，以便能够在一个地方查看此代码的所有信息。

每个 JSON 对象中都有三对值：每个对象中的LineLabel、Time和Temperature 。

现在折叠 CSS 和数据脚本，其余代码如下所示：

首先，请注意第 46 行和第 47 行。第 46 行首先引用 d3.v4 库，第 47 行引用 dimple.v2.3.0 库。首先需要 D3，并且必须将这两个库同步到正确的版本 - 事实也确实如此。不同版本的 Dimple 需要不同版本的 D3。

第 50-54 行包含 ChartLabels 的 div 元素和文本元素。

接下来，我们将检查第二个脚本部分，其中包含 Dimple 代码。

第 203 行定义了 svg 变量以及高度和宽度尺寸。它还将 SVG 附加到“body”元素。

var svg = dimple.newSvg("body",700, 400);

接下来在第 204 行，我们从 svg 变量和包含 JSON 对象数组的 data 变量创建 myChart 变量：

var myChart = new dimple.chart(svg，数据);

205 上的行只是一条注释，是一个示例行，用于显示如果我们不使用酒窝默认间距，如何确定 myChart 的尺寸。

//myChart.setBounds(80, 40, "75%", "60%");

默认情况下，Dimple 将高度初始化为 SVG 高度的 80%，将宽度初始化为 SVG 宽度的 80%。

在第 206-208 行中，我们使连续轴表现得像年份序列。本质上，我们将数字视为指定年份：

209行，将Label文本放在x轴上：x.title="Time in Minutes";

在第 211 行，我们打开 x 轴的网格线。请注意，在 Dimple 中添加此功能是多么简单：

x.显示网格线 = true;

在第 213 行，我们声明 y 变量并将 MeasureAxis 从数据温度值对添加到 y 轴：

var y =myChart.addMeasureAxis("y", "温度");

接下来在第 213 行，我们也打开 y 轴的网格线，就像 x 网格线一样：

y.显示网格线 = true;

在第 216 行，Dimple 神奇地根据LineLabel值对从我们的 JSON 对象数组中分离出线条：

var s = myChart.addSeries("LineLabel", dimple.plot.line);

变量 s 现在包含图表系列。

217 处的行将线条粗细设置为 6px：

s.线重=6；

第 218 行尚未包含在任何可视化中，但只需打开线标记，就会在图表的数据点处添加 Dimple 的交互式工具提示，如下所示：

s.lineMarkers = true;

220-226 行，添加线条颜色数组：

顺便提一下，我对颜色被稍微掩盖了感到很失望。可用的颜色不能反映真实的 RGB 值，因此很难将原生 D3 颜色与我想要的颜色相匹配。

229 的最后一行执行图表渲染：

我的图表.绘制();

<font style="vertical-al