Javascript 如何在D3中将坐标合并成一个svg元素？

我正在使用像素数据进行可视化，我已经能够成功地将数据加载到画布上。数据是关于地球上云的类型。大约有12种类型。每种类型在地图上都有一种颜色。现在我基本上是绘制像素的每个坐标，其中颜色是特定云的颜色，然后为其创建svg并将其加载到画布上。但是当我绘制像素数据时，它创建了太多的svg

然而，有些像素彼此相邻，我在想，有没有办法把相邻的两个像素连接起来。我有一个坐标列表：

Cloud1 = [(1, 1), (1, 2), (2, 1), (2, 2), .... ]

在本例中，我将把四个坐标合并成一个svg，因为它们彼此相邻

另外，还有一件事，在没有任何延迟的情况下，一次可以将多少svg加载到browsermax中

---

图像URL:

要回答连接彼此相邻像素的特定问题，请使用bin方法累积接触/相邻像素

按像素位置x、y对云的所有像素进行排序。迭代每个像素，对照所有现有的像素阵列进行检查，如果没有任何一个像素与任何像素阵列中的任何点接触，则使用该像素作为第一项创建一个新的像素阵列。如果当前像素接触到找到的第一个箱子中的某个项目，请将该像素添加到该箱子，然后转到云中的下一个像素

将云中的所有像素划分为单独的单元后，获取每个单元的外部x、y值，以绘制表示子云中的多段线。因此，基本上每个箱子都有一个svg

---

这将大大减少svg元素的数量，并为多段线云的区域添加不透明颜色，这可能会很好地覆盖其他云类型。

为什么不为所有对象使用一个svg，并为每个像素创建一个rect元素呢？我就是这么做的。我有一个地图的svg，然后为每个像素创建rect。我将链接一个图像。请参阅更新后的问题。如果不测试您的具体示例，如果您有超过几百个点来绘图，SVG可能会对您来说太慢，并且您可能应该考虑画布。