Javascript 如何将交叉筛选（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功能添加矩形等等，参考交叉过滤器：

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

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

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

谢谢， 基思有两行变化：

你的代码

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();

工作代码

---

希望这有帮助

交叉过滤器中的维度和过滤器是有状态的。因此，最后一行中的日志将为

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();

---

有一些非常好的交叉过滤教程，你可能想看一下，比如：在这里提问也有效：-）

你能把完整的代码放在小提琴上吗。。。即使它不起作用。你试过数据（calendarData.bottom（Infinity））吗？这是我试图实现的一个丑陋的版本：这是我用交叉过滤器得到的：太棒了！谢谢你，西里尔。完美的虽然这确实有效，但它通常不是非常惯用的交叉过滤器。如果

dim

是您的交叉筛选维度，则更常见的做法是使用

.data（dim.top（Infinity））

设置d3选择的数据。这样，当您进行更新时，将获得当前过滤器的维度值。