【问题标题】:Heatmap 25 millions points to render热图 2500 万个点进行渲染
【发布时间】:2021-08-28 05:58:57
【问题描述】:

我需要渲染一个大小为 5000x5000(2500 万点)的热图并每 10 秒更新一次。

问题:如果我想从头开始写这篇文章,我应该遵循什么方法?

【问题讨论】:

    标签: javascript charts visualization heatmap


    【解决方案1】:

    如果您在分辨率为 1920 x 1080 的单个常规显示器(全高清)中显示此内容,您可能无法显示每个点。

    这是因为分辨率实际上是您可以表示的像素数 - 因此,考虑到您使用的是整个屏幕,您的最大值将是 1920 像素 x 1080 像素(约 200 万像素/点)。

    因此,为了表示您想要的像素数量,在单个常规显示器中,您必须使用以下选项:

    • 对项目进行分组;
    • 添加带有滚动条的面板;
    • 减少数据集。

    确定策略后,您可以使用 D3 javascript 库来绘制它。

    在这里,您可以找到一篇关于将项目分组并使用 D3 绘制它们的策略的好帖子: https://int21.io/post/50-million-points/index.html

    【讨论】:

      猜你喜欢
      • 2013-07-11
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-01-29
      • 1970-01-01
      • 2011-01-04
      • 2012-03-29
      • 1970-01-01
      相关资源
      最近更新 更多