用道场制图千点答案

【问题标题】：Charting thousands of points with dojo用道场制图千点
【发布时间】：2011-08-11 13:49:31
【问题描述】：

我需要使用 dojo 图表库绘制数千个点，可能接近 50,000 个。它可以工作，但它肯定非常慢并且落后于浏览器。有什么办法可以获得更好的性能？

编辑：

我通过对数据应用渲染过滤器来解决。本质上，我有一个名为“render”的新项目参数，如果预计该点与其他点重叠，我的 json 源将其设置为 false。然后，我的 DataSeries 查询呈现：true 的所有点。这样，对于需要所有点的非视觉来源，所有数据仍然存在，而我的图表现在运行顺利。

伪代码：

def is_overlapped(x, y, x_round, y_round)
    rounded_x = round(x, x_round)
    rounded_y = round(y, y_round)
    hash = hash_xy(rounded_x, rounded_y)

    if(@overlap_filter[hash].nil?)
      @overlap_filter[hash] = true
      return false
    end

    return true
end

x_round 和 y_round 可以由 x 和 y 范围确定，例如 range / 100

【问题讨论】：

可能与 javascript 无关。 50,000 个 DOM 元素会很慢。所有的点都可见吗？您是否希望人们点击或互动或动画点？
50 000 个项目听起来是个坏主意 - 避免做愚蠢的事情！
所有点都不可见，但我不确定如何删除完全重叠的点。我想如果它非常有效，所有隐藏点都被删除了，那么剩下的点不会超过几千。
您能否使用聚类算法，并在用户降低到某个缩放级别之前显示带有点数的圆圈？这将需要一些预处理，但可以完成。或者，您可以显示密度（热图），直到用户放大到足够近为止。同样，用户将与此进行多少交互以及他们试图找出什么？
基本上，用户将看到一个散点图，以及由服务器计算的非线性拟合线。很多时候，数据中的错误会扭曲非线性拟合。我希望用户通过视觉分析来评估适合度。他们应该能够发现数据中的错误，然后单击/选择一组点以过滤掉并让服务器重新计算非线性拟合。有时他们可能需要放大图表的一部分以更好地评估某些数据是否可能是错误的一部分，或者只是为了更详细地查看已清理图表的一部分。

标签： javascript ajax dojo dojox.charting

【解决方案1】：

我知道这可能不是您正在寻找的答案，但您是否考虑过简单地减少您正在绘制的点数？我不知道图表的具体功能，但我想大多数具有这么多点的图表都是不必要的；并且没有观察者能够了解这种详细程度。

您的解决方案可能在于图形技术而不是 JavaScript。例如。您很可能会大大减少点数并使用折线图而不是散点图，同时仍将相似级别的信息传达给您的预期目标。

【讨论】：

当然，这可能完全不适用于您的要求。如果是这种情况，我深表歉意。
我考虑过随机抽取数据子集。虽然这不是一个坏主意，但它不适用于这种特殊情况。虽然 500x500 散点图显然不需要 50,000 个点，但在缩放到精确区域时需要它们。我想我可以使用 ajax 动态拉取缩放范围内的点，但如果可能的话，我想要一个更干净的解决方案。
另一个问题是该图的目的是在散点图中查找错误。如果我随机删除点，则错误可能会被删除并且我不会发现问题。
我采用了这种方法，但让它变得聪明而不是随机。效果很好。