如何使用D3 Js向下钻取图表列

Question

有人可以建议如何使用D3 JS库进行列钻取，

以下示例来自Hightchart，

http://www.highcharts.com/demo/column-drilldown

Answer 1

这个问题的一个完整的代码示例可能非常广泛，所以我将主要考虑如何处理它并假设您已经足够了解D3以将概念转换为代码。

让我们假设您具有绘制一般条形图的功能。

该功能的一部分可能是像

这样的东西

1. 设置svg元素和容器
2. 设置比例（一个用于x，一个用于y）
3. 根据您创建的比例添加轴
4. 将栏添加到svg容器中 4.1确保将数据集作为阵列提供 4.2为可用数据创建输入选择并附加rect个元素
   4.3为所有可用的条形节点更新x，y等属性 4.4删除出口选择上的所有节点

Voila你有一个简单的条形图。没有什么新内容，您可以在这里查看代码详细信息 - ＆gt; https://bl.ocks.org/mbostock/3885304

现在为了深入研究： 为了避免大量的代码重复，将上述步骤分成函数可能是有意义的。例如，设置功能只需创建您的svg和容器以及您的比例。

设置功能的重要之处在于您无需在钻取时重新运行它。

其次，您需要一个update功能。其中包含步骤3+，您需要重新运行这些步骤才能在钻取过程中更新图表。

此处的一个补充是添加功能，以便在开始时更新您的比例域（因为您的数据会在钻取过程中发生变化，并且您希望在比例尺中反映出来）。

既然你有这两个功能，你真正需要做的就是：

在轴标签或条形图上添加一个点击处理程序（点击条形图现在可能更容易）。你可以使用d3的.on()函数。 在那种情况下，您将希望按所单击栏的值对数据进行子集化（或根据数据的结构获取条形值的新数据集），然后使用新数据运行我们在上面创建的更新函数。

看起来像这样：

d3.selectAll('.bar-nodes) .on('click', function(d) { var updatedData = updateData(d); updateChart(updatedData); });

如果有什么不清楚，一些更具体的问题会很好。 希望有所帮助。