javascript - D3：二维阵列数据驱动的灰度图像显示

Question

有人知道如何使用 d3 显示灰度图像，即像素强度的二维数组吗？我似乎在任何地方都找不到它的任何例子，这会很棘手吗？任何帮助/链接/指针表示赞赏！

Answer 1

如果只想显示图像，请使用图像元素和“xlink:href”属性。例如：

svg.append("image")
    .attr("xlink:href", "my.png")
    .attr("width", 960)
    .attr("height", 500);

如果您想为灰度图像着色，请参阅此着色高度图示例，该示例使用分位数创建发散色标，并使用 HCL 插值以获得更好的感知：

如果您有其他表示形式的数据，这些示例可能很有用：

• 使用 SVG 矩形元素的 CSV 热图
• 使用 Canvas 来自 JSON 的热图

最后，如果您有单个样本而不是预先计算的 2D 直方图，则需要在生成上述热图之一之前对数据进行分箱。