如何使用 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，例如 , 4.4 删除退出选择上的任何节点y
   

瞧，你有一个简单的条形图。没有什么新内容，您可以在此处查看代码详细信息 -> 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);
    });

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