如何有效地将矩阵数据渲染为 SVG 中的热图？

Question

我有一个数据矩阵（96 列乘 >5000 行），其中每个值都在 -1 和 +1 之间。我编写了一个脚本来生成 SVG 格式的热图，但是我的真实数据集的 SVG 文件大小变得很大。 Inkscape 挣扎，渲染和屏幕更新非常缓慢。将其压缩为 svgz 也无济于事。

我采用为每个值绘制一个矩形的方法，每个矩形有 5 个属性：x、y、宽度、高度和填充。可以想象，对于 96x5000 的值，有很多矩形。通过将每个属性转换为整数，我将文件大小从 ~34MB 减少到 ~29MB。我的另一个想法是删除填充属性并将其替换为 10-20 类中的一个，每个颜色组一个。不过我还没有完成最后一点，因为我认为必须有更好的方法来做到这一点。

举个例子：-

    <rect fill="#000000" height="14" width="10" x="50" y="81" />

在 HTML 中，我会使用 <table>、<tr's> 和 <th's> 以及引用颜色组的短类名或 id。如果值为 0 或中间值，则不需要类名，<th> 可以继承预设的中性色。

虽然使用 SVG，但显然没有正式的表格规范，那么我应该怎么做呢？ 我目前正在考虑以下选项：-

1. display property 确实有一个（记录不充分的）内联表选项。显然，它可能是"an accidental remnant from CSS"。我想这意味着每行都有一个<g>，其id 引用了display:table-row-group 的样式。
2. 使用<text>元素作为行，嵌套<tspan>s，建议here。
3. 使用用 ECMASCript 编写的layout manager。

我还简要检查了 XSLT，它看起来很强大，但很复杂，而且似乎只能在 Web 浏览器中工作。理想情况下，我希望将所有内容保存在一个文件中，可以在矢量图形编辑器中保存、查看和编辑，但不确定 XSLT 是否允许这样做。

这样做最有效的方法是什么？文件大小并不像它呈现的速度那么重要。非常感谢任何帮助。

更新：-

• 2 不能作为文本和嵌套的 tspan 没有填充或背景颜色属性。该示例使用 rect 提供背景颜色，因为 text 和 tspan 不提供任何创建填充的方法。

我还想知道行长是否与渲染缓慢有关。我使用 Python 的 (c)ElementTree module 来生成 SVG，默认情况下它写入所有 XML 时没有单个换行符。是否可以帮助解析器/渲染器将图像的每一行分隔成 XML 中的新行？

Answer 1

我怀疑您最好为此使用画布。创建一个画布，然后在画布上绘制矩形。矩形将仅作为画布位图的一部分存在。