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

我一直在使用我的现有数据集成功创建了一个crossfilter对象，创建一个维和添加过滤器：如何将crossfilter（ed）数据集连接到d3图表？

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有关。

感谢，基思

来源

2015-11-03 Neptunemo

你可以把你的完整代码放在小提琴上...即使它不工作。 – Cyril

你尝试过数据（calendarData.bottom（Infinity））吗？ – FizBack

下面是我试图实现的一个丑陋版本：https://jsfiddle.net/duncanklf/besLh1pu/以下是我对crossfilter的看法：https：//jsfiddle.net/duncanklf/nvg5e7eb/ – Neptunemo

两线的变化：

您的代码

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

希望这有助于！

来源

2015-11-03 04:28:42 Cyril

太棒了！谢谢Cyril。完善！ – Neptunemo

虽然这确实起作用，但它通常不是非常习惯的Crossfilter。如果'dim'是Crossfilter维度，则使用'.data（dim.top（Infinity））'设置您的d3选择的数据更为常见。这样，当你进行更新时，你会得到当前过滤器的尺寸值。 –

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/问在这里也适用:-)

来源

2015-11-03 08:03:45

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

回答

相关问题