Question

我查看了crossfilter主页

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

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

将交叉图过滤和交叉过滤器添加到nvd3很简单，我只是简单地忽略了这个问题吗？

人们如何实现这一目标？

感谢。

Answer 1

DC很不错，因为您可以直接将维度和组传递给图形对象本身，而不必手动更新对交叉过滤器的更改。

如果您想将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非常适合暴露几乎所有底层图表组件（比例，轴等），这意味着您可以根据需要访问，添加和更新画笔，然后注册画笔事件，更新交叉过滤器，然后根据需要重绘图表。

它也是开源的，所以你的另一个选择是分叉回购并直接将刷支持和事件添加到源。

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

无论哪种方式，听起来都是一个有趣的挑战。祝你好运！

crossfilter，d3.brush和nvd3集成

1 个答案: