有人知道如何使用 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 直方图，则需要在生成上述热图之一之前对数据进行分箱。

关于javascript - D3 : Grayscale image display driven by 2D array data，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11852716/