Sankey 图中的向下钻取

Question

我正在寻找有关如何在桑基图中实现向下钻取的示例代码。我尝试使用列向下钻取演示中的向下钻取代码，但它对 sankey 不起作用。预期的功能与树状图非常相似，即单击一个节点以隐藏显示子节点。

示例： https://jsfiddle.net/y_tddel/d7jby2z1/5/

在此示例中，第二列中的每个节点都是可点击的，并且有自己的子节点 nodes.The Indo-Iranian 节点的扩展视图作为示例显示。

Answer 1

当前的向下钻取模块与 sankey 系列不兼容。您将需要创建自己的向下钻取逻辑。下面是一个基本演示，它展示了如何在点击事件上更新系列——这可以被视为对其他系列的向下钻取。

演示：https://jsfiddle.net/BlackLabel/hn19xga5/

  events: {
    click() {
      let series = this.series,
        chart = series.chart;

      if (!isDrilldown) {
        chart.backButton = chart.renderer.button('back', 20, 20, function() {
          series.update({
            data: initialData
          })
          chart.backButton.destroy();
          isDrilldown = false;

        }).add()
        isDrilldown = true;
      }

      this.series.update({
        data: drilldown1
      })
    }
  }

API: https://api.highcharts.com/highcharts/series.sankey.data.events.click

API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#button

API: https://api.highcharts.com/class-reference/Highcharts.Series#update

Answer 2

Series.point.events可用于在用户点击任意节点时触发事件，并更新系列数据，并添加返回按钮。

Link: https://api.highcharts.com/highcharts/series.sankey.point.events.click

看下面的代码示例：

Highcharts.chart('container', {
    series: [{
        point: {
            events: {
                click: function (e) {
                    console.log(e, 'e')

                    let series = this.series,
                        chart = series.chart;

                    if (this.isNode) {
                        if (isDrilldown[isDrilldown.length - 1] != this.name && drilldown_data.hasOwnProperty(this.name)) {
                            chart.backButton = chart.renderer.button('back', chart.plotLeft, 20, function () {
                                isDrilldown.pop();
                                d = JSON.parse(JSON.stringify(drilldown_data[isDrilldown[isDrilldown.length - 1]]));
                                series.update({data: d});
                                chart.backButton.destroy();
                                chart.title.show();
                            }).add()

                            isDrilldown.push(this.name);
                            chart.title.hide()
                            this.series.update({
                                data: JSON.parse(JSON.stringify(drilldown_data[this.name]))
                            })
                        }
                    }
                }
            }
        },

        keys: ['from', 'to', 'weight', 'drilldown'],
        data: JSON.parse(JSON.stringify(plot_data)),
        type: 'sankey'
    }],
});

演示：https://jsfiddle.net/deveshgoyal/1zcnuq5b/2/

Sankey 图中的向下钻取

Drilldown in Sankey Diagram

highcharts

sankey-diagram