显示/隐藏高图网络图中的子节点和链接

Question

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

这是我到目前为止的一支笔https://codepen.io/anon/pen/xvGMwa.我的问题是“链接”与节点没有关联。所以我很难找到一组节点及其链接并隐藏/显示它们。

我希望它只从前4个节点开始，然后能够单击节点上的一个动作来显示/隐藏其子节点。我最好用CSS来实现这一点。

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

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

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

Answer 1

通过点击节点，你可以在点中找到它的链接。链接到和点。来自阵列的链接。

要显示和隐藏它们，只需使用高图。SVGElement.hide（）和高图。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