crossfilter,d3.brush和nvd3集成

Question

我看过crossfilter主页

而且非常喜欢发生的事情.但如果我不需要,我不想手写我的所有图表.我已经查看了dc.js这是非常好的,并为您提供内置的crossfilter集成和过滤.

然而dc缺少一些我从nvd3得到的东西.然而,通过交叉滤波器进入/在nvd3之上进行任何类型的交叉图过滤(使用画笔或点击等取决于图形的类型)看起来像很多工作.我没有看到或听到任何类型的这项工作在任何地方发生,但它似乎是nvd3的自然进展.

将交叉图过滤和交叉过滤器添加到nvd3很容易,我只是忽略了一个直截了当的事情吗？

人们如何实现这一目标？

谢谢.

Answer 1

DC很不错,因为您可以将维度和组直接传递给图形对象本身,而不必手动更新对crossfilter的更改.

如果您想将Crossfilter和NVD3连接在一起,则需要手动更新NVD3域/范围或数据,以更改交叉过滤器尺寸/组的状态.这基本上是如果您查看源代码,Crossfilter页面示例如何处理它:http://square.github.io/crossfilter/.每当画笔改变时,图形都会重新绘制并更新以反映更改.

让NVD3图表重绘并反映新数据非常简单.您只需更新原点并再次调用条形图...例如.

var svg = d3.select("body").append("svg").style("height", "500px");
var barChart = nv.models.multiBarChart();

// Just execute this block each time the chart data changes
// and the chart will update in a nicely animated manner
svg
    .datum(chartData)
    .transition()
    .duration(500)
    .call(barChart);

如果你想在NVD3图表中加入画笔,那么棘手的部分实际上就是这样.这可能会变得棘手,因为你必须保持刷子与NVD3图表同步,因为他们的数据被更改以便正确绘制,但是如果你只是想根据另一个图表的刷子事件正确更新NVD3图表或你根本不关心刷子,它根本不应该太难.关于画笔的好教程在这里:http://bl.ocks.org/mbostock/1667367

即便如此,NVD3非常适合暴露几乎所有底层图表组件(比例,轴等),这意味着您可以根据需要访问,添加和更新画笔,然后注册画笔事件,更新crossfilter,然后根据需要重绘图表.

它也是开源的,所以你的另一个选择是分叉repo并直接将源支持和事件添加到源代码.

就个人而言,我有一个自定义的时间表图表,它在更新画笔时使用画笔和触发事件.在事件上,我然后更新NVD3堆积条形图的数据并重新绘制它.因此,当您更改时间线过滤器时,条形图会动画和更新.看到它在行动中非常光滑.

无论哪种方式,听起来都是一个有趣的挑战.祝好运!