d3.js – crossfilter,d3.brush和nvd3集成

我看了 crossfilter主页

真的很喜欢发生了什么事情但是如果我不需要,我不想手写所有的图形.我已经看过dc.js这是相当不错,并给你建立在跨过滤器集成和过滤.

然而,dc缺少一些我需要的东西,我从nvd3获得.然而,通过nvd3上/上的crossfilter获得任何类型的十字图过滤(根据图形的类型等等),看起来像是很多工作.我没有看到或听到任何类型的这项工作在任何地方,但它似乎是nvd3的一个自然进展.

添加十字图过滤和交叉过滤器到nvd3容易,我只是忽略了一个直截了当的这个？

人们如何实现这一点？

谢谢.

解决方法

DC很好,因为您可以直接将维度和组传递给图形对象本身,并且您不必手动更新对跨过滤器的更改.

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

获取NVD3图表重绘并反映新数据很容易.你可以更新基准,再次调用barchart …例如.

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对于暴露几乎所有基本图表组件(刻度,轴等)都非常好,这意味着您可以根据需要访问,添加和更新画笔,然后注册刷子事件,更新交叉过滤器,然后根据需要重新绘制图表.

它也是开放源代码,所以您的其他选项将是fork repo并将刷支持和事件直接添加到源.

就个人而言,我有一个自定义的时间轴图表,当刷新更新时,我使用刷子和火灾事件.在事件中,我然后更新NVD3堆叠条形图的数据并重绘.因此,当您更改时间轴过滤器时,条形图动画和更新.看到它在行动是非常光滑的.

无论如何,听起来像一个有趣的挑战.祝你好运！

d3.js – crossfilter,d3.brush和nvd3集成

解决方法

相关文章