Question

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

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功能附加矩形和诸如此类的东西，引用crossfilter：

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

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

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

谢谢，基思

Answer 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

希望这有帮助！

Answer 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/在这里也可以使用： - ）

如何将crossfilter（ed）数据集连接到d3图表？

2 个答案: