使用d3.js画笔作为SlickGrid的过滤器

时间:2013-11-07 20:44:29

标签: filter d3.js slickgrid brush

有一个很好的例子SlickGrid and d3.js被一起使用。我正在尝试将此可视化用于我自己的目的,但我发现这个例子太复杂而无法分解。这些例子似乎占据了主题的所有搜索结果,所以我很难找到更容易学习的东西。

我想采用标准图表(散点图/条形图/等),应用画笔并将过滤后的结果显示在数据表中。我已成功使用dc.js来实现这一点(开箱即用),但我的实际数据有数万行...使SlickGrid成为优先选择。

这是jsFiddle的link,展示了我想要实现的目标。画笔可以识别哪些数据已被“刷过”(为了外观而应用类更改),但我不知道如何将此数据的ID传递给SlickGrid以更新网格。在jsFiddle中,我试图使用gridUpdate(d),就像原始的并行坐标示例一样......没有成功。

svg.append("g")
    .attr("class", "brush")
    .call(d3.svg.brush().x(x).y(y)
    .on("brushstart", brushstart)
    .on("brush", brushmove)
    .on("brushend", brushend));

function brushmove() {
    var e = d3.event.target.extent();

    rectData.classed("selected", function(d, i) {
    if ( e[1][1] >= d.id && e[0][1] <= d.id && x(e[0][0]) <= x(d.Date) && x(e[1][0]) >= x(d.Date) ) 
        { gridUpdate(d); return true; } 
    else 
        { return false; };
});

我已经尝试了很多次迭代,但我无法弄清楚dataView想要什么作为输入......

function gridUpdate(data) {
    dataView.beginUpdate();
    dataView.setItems(data);
    dataView.endUpdate();
};

任何帮助都会非常感激,我在SlickGrid上的文档上遇到了困难,终于到了需要帮助的地步!

0 个答案:

没有答案