javascript - 在 Highcharts Networkgraph 中显示/隐藏子节点和链接

Question

我已经使用 Highcharts 构建了一个网络图，我正在努力寻找一种方法来轻松地“扩展”或“显示”节点的子节点。我遇到的问题是数据声明的方式非常线性。它实际上没有太多层次结构。

这是我目前拥有的笔 https://codepen.io/anon/pen/xvGMwa .我遇到的问题是“链接”与节点无关。所以我无法轻松找到一组节点及其链接并隐藏/显示它们。

我想要的是它只从前 4 个节点开始，然后能够单击节点上的操作以显示/隐藏其子节点。我最好使用 CSS 来完成此操作。

我找到的最接近的是这个例子，但它并不是我真正想要的:

point: {
            events: {
                click: function() {
                    this.remove();
                }
            }
        }

奇怪的是，来自 Highcharts 的例子在这里 https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/series-networkgraph/data-options/在链接上有 ID。但我的例子没有。我不知道这是为什么？我想如果我的链接上有 ID，那么找到它们并隐藏/显示它们会更容易。

Answer 1

通过单击节点，您可以在 point.linksTo 和 point.linksFrom 数组中找到它的链接。

要显示和隐藏它们，只需使用 Highcharts.SVGElement.hide() 和 Highcharts.SVGElement.show() 方法。检查下面发布的演示和代码。

代码:

series: [{
  ...
  point: {
    events: {
      click: function() {
        var point = this;

        if (!point.linksHidden) {
          point.linksHidden = true;

          point.linksTo.forEach(function(link) {
            link.graphic.hide();

            link.fromNode.graphic.hide();
            link.fromNode.dataLabel.hide();
          })
        } else {
          point.linksHidden = false;

          point.linksTo.forEach(function(link) {
            link.graphic.show();

            link.fromNode.graphic.show();
            link.fromNode.dataLabel.show();
          })
        }
      }
    }
  }
  ...
}]

演示:

• > https://jsfiddle.net/BlackLabel/9drzxj2L/

API 引用:

• https://api.highcharts.com/class-reference/Highcharts.SVGElement#hide

• https://api.highcharts.com/class-reference/Highcharts.SVGElement#show