2014-06-22 48 views
1

我仍處於crossfilter和D3的學習階段。有關Crossfilter上航空公司示例的基本問題

我對他們提供

1提供Crossfilter

對於example的例子兩個問題。線285:

var list = d3.selectAll(".list").data([flightList]);

在D3維基,selection.data([values[, key]])指定的值是數據值,如數字或對象的數組,或返回值的數組的函數的陣列。

但是flightList不返回值的數組,並且flightList的擴充是div。

2。行499:

dimension.filterRange(extent);

爲什麼沒有呼籲通過barPath(更新條形圖)功能?條形圖如何通過數據更新本身?所以如果數據發生變化,圖表會同時更新?

回答

0

1.

「列表」是具有一個元素的數組,因爲它的數據,並將該單元素是功能flightList的選擇。

在第301行,我們看到'list.each(render);',這意味着爲'list'選擇中的每個元素調用render函數,將其數據(flightList)作爲第一個參數傳遞給渲染功能。

因此,'render(method)'函數中的第295行是'd3.select(this).call(method);'可以或多或少地在列表的上下文中重寫爲'd3.select(「.list」)。call(flightList);',它調用傳遞'.list'div的flightList函數作爲參數。 flightList函數然後繼續建立在該div之上的航班列表。

至少,這是我的閱讀。國際海事組織,該代碼是非常優雅和普遍的,但非常難以遵循作爲一個例子。

2.

線281只設置了一個事件監聽器上所有圖表重新呈現每當刷移動或移動完成一切(所述「renderAll」功能)。

+0

是的,我同意代碼非常優雅,一般,很難遵循。感謝您對第一個問題的解釋。那麼,datum只是一個對象的引用?該對象可以是一個函數或一個數字。對於第二個問題,當用戶刷新時,是否會調用註冊事件「brush」和「brush.chart」的所有函數? – user2149631

+0

第一個問題中,selection.datum直接設置特定元素的數據對象。它可以是任何JS值,包括對象,數組或函數。它在d3.js API文檔中進行了討論:https://github.com/mbostock/d3/wiki/Selections#datum您是否熟悉數據連接概念?這裏有一些很棒的教程和示例:https://github.com/mbostock/d3/wiki/Tutorials關於第二個問題:調用'renderAll'函數,然後在每個列表和條上調用渲染函數圖表。 –

+0

我不太確定事件的命名。註冊爲「brush.chart」的函數,然後「brush」和「brush.chart」都會觸發該函數? – user2149631