如何使用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删除退出选择中的所有节点

瞧，您有一个简单的条形图。 没什么新鲜的，您可以在这里查看代码详细信息-> https://bl.ocks.org/mbostock/3885304

现在开始进行深入研究：为了避免大量的代码重复，将上述步骤分成函数可能是有意义的。 因此，例如，一个设置功能仅创建了您的svg和容器以及您的秤。

关于设置功能，重要的是您无需在追溯过程中重新运行它。

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

这里的一个附加功能是在开始时添加用于更新秤域的功能（因为您的数据在追溯过程中发生更改，并且您希望在秤中反映出来）。

现在，您具有这两个功能，您真正需要做的就是：

在轴标签或条形图上添加一个单击处理程序（现在单击条形图可能会更容易）。 您可以.on()使用d3的.on()函数。 在这种情况下，您将需要通过单击的条形图的值对数据进行子集设置（或根据数据的结构获取新的条形图数据集），然后对新数据运行上面创建的更新功能。

它可能看起来像这样：

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

如果不清楚，则可以使用一些更具体的问题。 希望能有所帮助。