C3.js 中的向下钻取功能答案

【问题标题】：Drill down capabality in C3.jsC3.js 中的向下钻取功能
【发布时间】：2015-08-22 06:26:39
【问题描述】：

我有一个显示两个团队的简单条形图。这是屏幕截图。

现在，例如，如果我单击多头，它应该会显示向下钻取并显示另一个条形图，其中将有 5 个条形图，每个条形代表一个来自多头的玩家。如果我点击湖人队，它应该向下钻取并显示另一个条形图，其中有 5 个条形图，每个条形图代表湖人队的一名球员。

例如，当我点击公牛后，它应该会显示类似这样的内容。

所以简而言之，我正在寻找向下钻取功能。这是我目前的代码。

这是我目前拥有的代码，这是我的FIDDLE。

var chart = c3.generate({
    data: {
        columns: [
            ['bulls', 30],
            ['lakers', 50],
        ],
        type : 'bar'

    },           

});

如果知道如何实现这一点，或者即使有人可以编辑我的小提琴向我展示一些虚拟示例，我将不胜感激。

【问题讨论】：

标签： javascript d3.js c3.js

【解决方案1】：

您只需要确定点击了哪个数据点，然后加载球员数据并卸载球队数据。

onclick: function (d, element) {
    chart.load({
        unload: ['bulls', 'lakers'],
        columns: <player data for the clicked team>
    });
}

更新小提琴：http://jsfiddle.net/mcuepavh/1/

【讨论】：