关于Crossfilter航空公司案例的初步问题

时间:2014-06-22 02:30:03

标签: d3.js crossfilter

我还处于crossfilter和D3的学习阶段。

我对Crossfilter

上提供的示例有两个问题

对于他们提供的example

1。第285行:

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

在D3 wiki中,selection.data([values[, key]])指定的值是数据值的数组,例如数字或对象的数组,或返回值数组的函数。

但是flightList不返回值数组,而flightList的扩充是div。

2。第499行:

dimension.filterRange(extent);

为什么barPath()没有要求更新条形图的函数?条形图如何通过数据更新自身?那么如果数据发生变化,图表会同时更新吗?

1 个答案:

答案 0 :(得分:0)

1

'list'是一个选择,它有一个单元素数组作为数据,单个元素是函数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之上建立航班列表。

至少,这是我的阅读。 IMO,该代码非常优雅和通用,但作为一个例子非常难以理解。

2

第281行在所有图表上设置一个事件监听器,每当画笔移动或完成移动时,它都会重新渲染所有内容('renderAll'函数)。