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

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

解决方法

如果只想显示图像,请使用 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直方图,则需要在生成上述热图之前对数据进行分组.