将 Google 地图和 InfluxData 的 Giraffe 联系在一起的算法

作者：Anais Dotis-Georgiou / 产品, 用例, 开发者
2019 年 8 月 19 日

作为开发者布道师，最美好的部分之一是能够与社区分享开发者的工作成果。在 InfluxData 工作也意味着我博客中写的代码、项目或想法都来自于杰出的工程师，他们像任何优秀的编码魔术师一样，都有几个绝招。今天，我将详细描述一个简单但重要的技巧：Giraffe 中使用的算法，Giraffe 是一个基于 React 的可视化库，用于实现 InfluxDB Cloud 2.0 用户界面 (UI)。

一种算法，两种类型的可视化

Google 地图和 InfluxData 的 Giraffe 有什么共同之处？Ramer-Douglas-Peucker 算法（RDP 算法）的实现。作为一种点减少算法，它以视觉上适当的方式表示复杂的线条，使用更少的点。

<figcaption> Ramer-Douglas-Peucker 算法的原始数据集（右）和减少输出（左）。图片来自 NAMEKDEV。</figcaption>

它为什么有用

直到我了解了这个算法，我才想到要问这个问题：“Google 地图如何在我的浏览器上如此快速地渲染地图？” 地图包含数百万个地理空间数据点，但此数据的可视化仅使用几千个像素。

在地图上绘制每个点是冗余且计算量大的。RDP 算法用于减少冗余点，并实现我期望 Google 地图提供的快速渲染。虽然此算法通常用于渲染地理空间数据，但它也适用于时间序列数据。客户需要能够从 InfluxDB 查询数十万个点，并让 Chronograf 快速渲染折线图或散点图。下面的折线图和散点图是 InfluxDB Cloud 2.0 中一些精美的 Giraffe 可视化的两个示例。

<figcaption> 请查看此 Storybook 以获取更多示例，包括直方图和热图。或者只需在此处 免费 试用即可。</figcaption>

它是如何工作的

为了应用该算法，用户必须定义 epsilon，这是一个阈值限制，用于确定要保留和丢弃哪些点，其值必须大于 0。请查看此 交互式可视化，以了解 epsilon 值如何影响输出。RDP 算法是递归的，包含三个步骤。

步骤一：该算法自动保留第一个点和最后一个点。接下来，它从书挡点绘制最短的线。

步骤二：它确定哪个点离线最远，并从该点绘制一条新线。

步骤三：任何与此线的 epsilon 距离 之内的点都将被删除。由于点位于 epsilon 之内，因此将其删除并绘制近似值。

就是这样。该过程递归重复，直到形成折线的新的近似值。

重复步骤一。

重复步骤二。

最终近似值，在一个周期之后，由焦橙色线表示。

结论

能够收集和存储高吞吐量时间序列数据是多个行业关键任务工作负载的一部分。但是，如果没有快速渲染和有意义的可视化解决方案，这些数据就会失去大部分价值。毕竟，如果数据需要几分钟才能渲染，导致您错过重要事件，那么以纳秒级精度收集数十万个点有什么意义呢？

通过 Giraffe，InfluxDB Cloud 2.0 中时间序列数据的快速渲染实现了快速分析、实时监控和立即采取行动。如果您有任何疑问，请在我们的 社区站点 或 Slack 频道上发布。