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

Question

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

var dataset = [];

// The arrays xpoints and ypoints are populated dynamically 
// with hundreds of thousands of points

var xpoints = chartData["xdata"];
var ypoints = chartData["ydata"];
var area1;

var svg = dimple.newSvg("#" + mychart, 700, 600);
var x, y;

for (var i = 0; i < xpoints.length; i++)
    dataset.push({
        x : xpoints[i],
        y1 : parseFloat(ypoints[i])
    });

var myChart = new dimple.chart(svg, dataset);
myChart.setBounds(75, 30, 480, 330);

y = myChart.addMeasureAxis("y", "y1");

x = myChart.addCategoryAxis("x", "x");
area1 = myChart.addSeries("First", dimple.plot.area, [ x, y ]);

var l = myChart.addLegend(65, 10, 510, 20, "right");        
myChart.draw(1500);

有没有什么方法可以在 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 中的大型数据集以呈现图表

Handling large datasets in dimple.js to render a chart

javascript

optimization

charts

d3.js

dimple.js