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

Question

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

但是，有些像素彼此相邻，我在想有什么方法可以将这两个相邻的像素连接起来。我有一个坐标列表：

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

在这种情况下，我会将四个坐标组合成一个 svg，因为它们彼此相邻。

另外，还有一件事，您可以一次将多少个 svg 加载到浏览器中（最大）而没有任何延迟？

图片网址：http://i.stack.imgur.com/beB8f.png

Answer 1

要回答连接相邻像素的具体问题，请使用 bin 方法来累积接触/相邻像素。

按像素位置 (x,y) 对云的所有像素进行排序。遍历每个像素，检查所有现有的 bin（像素数组），如果没有一个 bin 触及任何 bin 中的任何点，则以该像素作为第一项创建一个新 bin。如果当前像素触及找到的第一个 bin 中的项目，则将该像素添加到该 bin 并转到云中的下一个像素。

云中的所有像素都被划分为单独的 bin 后，获取每个 bin 的外部 x,y 值以绘制代表子云的折线。所以基本上你有 1 个 svg 代表每个 bin。

这应该会大大减少 svg 元素的数量，并且您还可以使用不透明的颜色为折线云的区域着色，这可以很好地覆盖其他云类型。