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

Question

我还处于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（）没有要求更新条形图的函数？条形图如何通过数据更新自身？那么如果数据发生变化，图表会同时更新吗？

Answer 1

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'函数）。