将谷歌地图和InfluxData的Giraffe联系在一起的计算方法

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

作为开发者倡导者，最美好的事情之一就是能与社区分享开发者的工作。在InfluxData工作也意味着我所博客中提到的代码、项目或想法都来自杰出的工程师，他们像任何优秀的编码魔术师一样，有许多拿手好戏。今天，我将详细描述一个简单但重要的技巧：在React可视库Giraffe中使用的算法，该库用于实现InfluxDB Cloud 2.0用户界面（UI）。

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

谷歌地图和InfluxData的Giraffe有什么共同点？那就是实现了Ramer-Douglas-Peucker算法（RDP算法）。作为一种点减少算法，它以视觉上合适的方式，用更少的点来表示复杂的线条。

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

它的实用性

直到我了解到这个算法，我才第一次想过这样的问题：“谷歌地图是如何在我的浏览器上快速渲染地图的？” 地图中包含数百万个地理空间数据点，但数据的可视化只使用了数千个像素。

在地图上绘制每一个点都是冗余且计算量巨大的。RDP算法用于减少冗余点，使我能够以谷歌地图所期望的速度进行快速渲染。虽然这个算法通常用于渲染地理空间数据，但它也适用于时间序列数据。客户需要能够从InfluxDB查询数十万个点，并让Chronograf快速渲染线图或散点图。下面的线图和散点图是InfluxDB Cloud 2.0中一些美丽的Giraffe可视化的两个例子。

<figcaption>请查看此Storybook了解更多示例，包括直方图和热图。或者您可以免费尝试这里。</figcaption>

它的工作原理

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

第一步：算法自动保留第一个和最后一个点。接下来，它从端点画出最短的线。

第二步：它确定离这条线最远的点，并从这个点画出新线。

第三步：任何离这条线epsilon距离内的点都将被移除。由于点位于epsilon内，它将被移除，并绘制近似线。

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

第一步重复。

第二步重复。

经过一轮后，最终近似，由烧焦的橙色线表示。

结论

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

InfluxDB Cloud 2.0通过Giraffe快速渲染时间序列数据，使快速分析、实时监控和立即行动成为可能。如果您有任何问题，请在我们的社区网站或Slack频道上发布。