D3：由2D阵列数据驱动的灰度图像显示

Question

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

Answer 1

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

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

如果要对灰度图像进行着色，请参阅此colorized heightmap example使用分位数创建发散色阶，并使用HCL插值以获得更好的感知：

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

• heatmap from CSV using SVG rect elements
• heatmap from JSON using Canvas

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