有一个很好的例子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上的文档上遇到了困难,终于到了需要帮助的地步!