2014-06-22 51 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