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

Question

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

Answer 1

如果只想显示图像,请使用image元素和"xlink:href"属性.例如:

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

如果要着色灰度图像,请参阅此彩色高度图示例,该示例使用分位数创建发散色阶,并使用HCL插值以获得更好的感知:

如果您将数据包含在其他表示形式中,则这些示例可能很有用:

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