如何将 crossfilter(ed) 数据集连接到 d3 图表？答案

【问题标题】：How do I connect a crossfilter(ed) dataset to a d3 chart?如何将 crossfilter(ed) 数据集连接到 d3 图表？
【发布时间】：2015-11-03 00:40:10
【问题描述】：

我已使用现有数据集成功创建了一个交叉过滤器对象，创建了一个维度并添加了一个过滤器：

var calendarData = crossfilter([
{start_date: "2015-07-01",end_date: "2015-09-01",Channel: "Twitter"}, 
{start_date: "2015-07-01",end_date: "2015-07-24",Channel: "Twitter"}, 
{start_date: "2015-07-15",end_date: "2015-09-01",Channel: "Twitter"}, 
{start_date: "2015-08-05",end_date: "2015-09-24",Channel: "Facebook"}, 
{start_date: "2015-08-05",end_date: "2015-08-10",Channel: "Facebook"}
]);

// create dimension, based on Channel    

var calendarDataByChannel = calendarData.dimension(function(d) { return d.Channel; });

// filter by Twitter    

var calendarDataFilter = calendarDataByChannel.filter("Twitter");

然后我创建一个 svg 并尝试按照正常的 d3 功能附加矩形等，引用交叉过滤器：

var rectangles = svg.append("g")
    .selectAll("rect")
    .data(calendarData)
    .enter();

但它不起作用。连接到交叉过滤数据的正确方法是什么？

我不想在这个项目中使用 dc.js，我能找到的所有示例通常都与 dc 有关。

谢谢，基思

【问题讨论】：

你能把你的完整代码放在小提琴上吗……即使它不起作用。
你试过 data(calendarData.bottom(Infinity)) 吗？
这是我想要实现的一个丑陋版本：jsfiddle.net/duncanklf/besLh1pu，这是我使用交叉过滤器所拥有的：jsfiddle.net/duncanklf/nvg5e7eb

标签： javascript d3.js svg crossfilter

【解决方案1】：

两行改动：

你的代码

var calendarDataFilter = calendarDataByChannel.filter("Twitter");

应该是：

var calendarDataFilter = calendarDataByChannel.filter("Twitter").top(Infinity);

接下来是你的代码：

var rectangles = svg.append("g")
    .selectAll("rect")
    .data(calendarData)
    .enter();

应该是

var rectangles = svg.append("g")
    .selectAll("rect")
    .data(calendarDataFilter)
    .enter();

工作代码here

希望这会有所帮助！

【讨论】：

太棒了！谢谢西里尔。完美！
虽然这确实有效，但它通常不是非常惯用的 Crossfilter。如果dim 是您的Crossfilter 维度，则更常见的是使用.data(dim.top(Infinity)) 来设置您的d3 选择的数据。这样，当您进行更新时，您将获得当前过滤器的维度值。

【解决方案2】：

Crossfilter 中的维度和过滤器是有状态的。所以这里最后一行的日志是true。

var calendarData = crossfilter([
{start_date: "2015-07-01",end_date: "2015-09-01",Channel: "Twitter"}, 
{start_date: "2015-07-01",end_date: "2015-07-24",Channel: "Twitter"}, 
{start_date: "2015-07-15",end_date: "2015-09-01",Channel: "Twitter"}, 
{start_date: "2015-08-05",end_date: "2015-09-24",Channel: "Facebook"}, 
{start_date: "2015-08-05",end_date: "2015-08-10",Channel: "Facebook"}
]);   

var calendarDataByChannel = calendarData.dimension(function(d) { return d.Channel; });   
var calendarDataFilter = calendarDataByChannel.filter("Twitter");
console.lot(calendarDataByChannel === calendarDataFilter);

写这个的惯用方式会更像

var calendarData = crossfilter([
{start_date: "2015-07-01",end_date: "2015-09-01",Channel: "Twitter"}, 
{start_date: "2015-07-01",end_date: "2015-07-24",Channel: "Twitter"}, 
{start_date: "2015-07-15",end_date: "2015-09-01",Channel: "Twitter"}, 
{start_date: "2015-08-05",end_date: "2015-09-24",Channel: "Facebook"}, 
{start_date: "2015-08-05",end_date: "2015-08-10",Channel: "Facebook"}
]);

// create dimension, based on Channel    

var calendarDataByChannel = calendarData.dimension(function(d) { return d.Channel; });

// filter by Twitter    

calendarDataByChannel.filter("Twitter");

var rectangles = svg.append("g")
    .selectAll("rect")
    .data(calendarDataByChannel.top(Infinity))
    .enter();

有很多不错的 Crossfilter 教程，您可能想看看，例如：http://blog.rusty.io/2012/09/17/crossfilter-tutorial/ 在这里提问也可以 :-)

【讨论】：