减少大数据集 DOM 元素的策略

我有一个大型数据集，想使用 dc.js 显示。条目数量远远超出了屏幕上可用的绘图空间（以像素为单位）。因此，在 500 像素宽的图表上渲染 20k 点是没有意义的，而且还会降低浏览器的速度。

我读了维基百科的性能柚木部分 https://github.com/dc-js/dc.js/wiki/Optimization-and-Performance-Tuning并想到了其他一些事情：

• 使用交叉过滤器聚合组（例如，如果我有 500 像素宽的 svg，则将数据集分为 500 组）
• 使用 Douglas–Peucker 或 Visvalingam 算法简化我的数据

dc.js 提供了一个简洁的rangeChart https://dc-js.github.io/dc.js/docs/html/dc.coordinateGridMixin.html#rangeChart可用于显示我想要使用的范围选择。

但我放大得越多rangeChart我想展示的细节越多。但我不知道如何获取图表的缩放级别并“即时”聚合一组。也许有人对此有过思考。

我创建了一个codepan https://codepen.io/anon/pen/NEZNYe举个例子。

这个问题出现了很多，所以我添加了一个焦点动态间隔 http://dc-js.github.io/dc.js/examples/focus-dynamic-interval.html例子。

这是对相同技术的改进切换时间间隔 http://dc-js.github.io/dc.js/examples/switching-time-intervals.html例如，除了这里我们确定哪个d3时间间隔 https://github.com/d3/d3-time#api-reference根据范围图表中画笔的范围来使用。

不幸的是我现在没有时间调整它，所以让我们迭代一下。 IMO 它几乎但不够快 - 它可以采样更少的点，但我使用了内置的时间间隔。当您在直流折线图中看到锯齿线时

这通常是因为你正在显示too many点 - 应该有几十个，而不是几百个，更不能有几千个。

这个想法是在不同的时间间隔产生不同的组。在这里，我们将定义一些间隔和阈值（以毫秒为单位），在该阈值时我们应该使用该间隔：

    var groups_by_min_interval = [
        {
            name: 'minutes',
            threshold: 60*60*1000,
            interval: d3.timeMinute
        }, {
            name: 'seconds',
            threshold: 60*1000,
            interval: d3.timeSecond
        }, {
            name: 'milliseconds',
            threshold: 0,
            interval: d3.timeMillisecond
        }
    ];

同样，这里应该有更多 - 因为我们将动态生成组并缓存它们，所以有一堆是可以的。 （它可能会在某些时候占用内存，但现在在 JS 中千兆字节已经可以了。）

当我们需要一个组时，我们将使用 d3 间隔函数生成它，该函数生成下限，然后减少总计和计数：

    function make_group(interval) {
        return dimension.group(interval).reduce(
            function(p, v) {
                p.count++;
                p.total += v.value;
                return p;
            },
            function(p, v) {
                p.count--;
                p.total += v.value;
                return p;
            },
            function() {
                return {count: 0, total: 0};
            }
        );
    }

因此，我们将告诉图表计算其平均值valueAccessors:

    chart.valueAccessor(kv => kv.value.total / kv.value.count)

这是有趣的部分：当我们需要一个组时，我们将扫描这个列表，直到找到第一个阈值小于当前范围（以毫秒为单位）的规范：

    function choose_group(extent) {
        var d = extent[1].getTime() - extent[0].getTime();
        var found = groups_by_min_interval.find(mg => mg.threshold < d);
        console.log('interval ' + d + ' is more than ' + found.threshold + ' ms; choosing ' + found.name +
                    ' for ' + found.interval.range(extent[0], extent[1]).length + ' points');
        if(!found.group)
            found.group = make_group(found.interval);
        return found.group;
    }

将其连接到filtered范围图的事件：

    rangeChart.on('filtered.dynamic-interval', function(_, filter) {
        chart.group(choose_group(filter || fullDomain));
    });

暂时没时间了。请提出任何问题，我们会更好地完善它。我们需要自定义时间间隔（例如十分之一秒），但我现在找不到该示例。有一个好方法可以做到这一点。

Note：我比你高了一个数量级，积分达到了五十万。这对于较旧的计算机来说可能太多了，但在 2017 年的计算机上，它证明数据量不是问题，DOM 元素才是。