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

Question

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

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

谢谢，基思

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 图表？

How do I connect a crossfilter(ed) dataset to a d3 chart?

javascript

svg

d3.js

crossfilter