d3js (+crossfilter/dc) 箱线图性能

Question

我正在尝试使用 D3、Crossfilter 和 DC 的组合生成交互式箱线图，主要使用这个例子：https://github.com/dc-js/dc.js/blob/master/web/examples/box-plot.html

我的数据看起来更像这样：

id      date        met1
6368    10/24/2013  0.84
6369    10/24/2013  0.67
6374    10/24/2013  0.96
6375    10/24/2013  0.97

大约有 50 万个数据点，这对于除箱线图之外的所有其他内容都适用。代码工作正常，箱线图也很好，但是当我在其他地方更改过滤器时，箱线图需要永远更新：

var met1Dim = data.dimension(function(d) {return "metric 01";});
var met1Values = met1Dim.group().reduce(
            function(p, v) {
                p.push(v.met1);
                return p;
            },
            function(p,v) {
                p.splice(p.indexOf(v.met1), 1);
                return p;
            },
            function() {
                return [];
            }

当我将整数作为数据传递（只需将 v.met1 替换为 parseInt(v.met1 * 100)）时，性能会大大提高（但仍不完全理想），但这有点半途而废，我会喜欢在适当的范围内显示数据，而不是将所有内容强制转换为整数。最显着的减速发生在我删除数据集时，我认为是 slice(indexOf()) 减慢了一切（使用浮点数时）。我能做些什么来加快这个操作吗？我在想一个使用 id 数据的关联数组可能是一个键，但我不确定如何将关联数组传递给 reduce() 函数。

谢谢。

Answer 1

使用地图查找而不是 indexOf 肯定会有所帮助，但不幸的是，当您真正想要的只是使用 met1 进行基本分组时，您需要跳过这些障碍。值显示在顶层，因为这是 dc.js 所期望的。

如果 dc.js 允许您指定一个访问器函数，该函数允许您定义您希望如何在需要的点从绑定对象中提取 met1 值，那就太好了。 d3 在任何地方都使用这种模式，而且非常方便（也可以让您免于这种性能密集型的杂耍）。

除非对 dc.js 进行这种更改，否则我认为您对地图查找的想法可能是最好的选择。您可以使用 reduce 函数的闭包范围来存储它。由于您的记录具有唯一 ID，因此您可以只使用单个地图而无需担心冲突：

var indexMap = {};
var met1Values = met1Dim.group().reduce(
    function(p, v) {
        indexMap[v.id] = p.length;  // length before push is index of pushed element
        p.push(v.met1);
        return p;
    },
    function(p,v) {
        p.splice(indexMap[v.id], 1);
        return p;
    },
    function() {
        return [];
    }
);