Question

我希望使用dimple.js绘制大型数据集的图表。我的代码工作得很好。但唯一的问题是该图表需要超过45秒才会出现。我正在寻找代码中的某种优化，以减少渲染图表所需的时间。以下是我的区域图表的代码：

有没有办法在dimple.js本身或者使用d3.js中优化这段代码？

Answer 1

我担心Dimple对于数十万点并不是非常有效。它的绘图逻辑是为灵活性而构建的，对于这样的情况，你需要编写特定的d3代码（想想Dimple作为瑞士军刀，但在这里你需要一把手术刀）。即使使用原始d3，您也可能会遇到包含该点数的路径的问题。当然尝试原始d3，但你可能需要编写一些更复杂的附加逻辑来平均每个n点，然后在缩放时填写详细信息。还要记住，即使使用完美的客户端代码，只需从服务器获取该数据量，您就会受到明显的等待。

Answer 2

我找到了解决方案!!我坚持使用dimple.js本身而不是原始d3。

我做的是先汇总值，然后将它们传递给chart.draw()函数

现在渲染图表所需的时间从40秒减少到12秒，这要好得多。

目前，我的聚合函数只是总结了特定类别的值。也许draw（）函数中的实现稍微复杂一点，因此需要额外的时间。 xpoints[]和ypoints[]是我的数组，有十万分。

早些时候，我刚刚这样做了：

dataset.push({
                x : xpoints[i],
                y1 : parseFloat(ypoints[i])

                });

现在，我首先按如下方式应用聚合：

                var isPresent = false;
                for (var j = 0; j < unique_x.length; j++) {
                    if (xpoints[i] == unique_x[j]) {
                        y_val = parseFloat(ypoints[i]);
                        if (isNaN(y_val)) {
                            y_val = 0;
                        }
                        y_sum[j] = y_sum[j] + y_val;
                        isPresent = true;
                        break;
                    }
                }
                if (isPresent == false) {
                    unique_x.push(xpoints[i]);
                    y_sum.push(parseFloat(ypoints[i]));
                }

然后，我这样做：

for (var i = 0; i < unique_x.length; i++) {
                dataset.push({
                    x : unique_x[i],
                    y1 : y_sum[i]

                });

处理dimple.js中的大型数据集以呈现图表

2 个答案: