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

前端之家收集整理的这篇文章主要介绍了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直方图,则需要在生成上述热图之前对数据进行分组.

猜你在找的JavaScript相关文章