10

我看过crossfilter主页

真的很喜欢正在发生的事情。但是如果我不需要的话，我不想手写我所有的图表。我已经查看了dc.js，它非常好，并为您提供了内置的交叉过滤器集成和过滤。

但是 dc 缺少一些我从 nvd3 获得的东西。然而，通过交叉过滤器在 nvd3 中/顶部进行任何类型的交叉图过滤（使用画笔或单击等，具体取决于图形的类型）看起来需要做很多工作。我没有在任何地方看到或听说过任何类型的工作，但这似乎是 nvd3 的自然发展。

向 nvd3 添加交叉图过滤和交叉过滤器是否容易，我只是忽略了一个简单的解决方法吗？

人们是如何做到这一点的？

谢谢。

4

1 回答 1

9

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

如果您想将 Crossfilter 和 NVD3 绑定在一起，您需要手动更新 NVD3 域/范围或有关更改 crossfilter 维度/组状态的数据。如果您查看源代码，这基本上就是 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，然后根据需要重新绘制图表。

它也是开源的，因此您的另一个选择是分叉存储库并将画笔支持和事件直接添加到源代码中。

就个人而言，我制作了一个自定义时间线图表，它使用画笔并在画笔更新时触发事件。在事件中，我更新 NVD3 堆积条形图的数据并重新绘制它。因此，当您更改时间线过滤器时，条形图会动画并更新。看到它在行动中很漂亮。

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

于 2013-09-30T14:01:06.627 回答