如何將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圖表？

回答

相關問題