Showing/Hiding child nodes and links in Highcharts Networkgraph

问题

I've built a network graph with Highcharts and I'm struggling to find a way to easily "expand" or "show" a node's children. The problem I've got is that the way the data is declared is very linear. It doesn't really have much of a hierarchy.

Here's a pen of what I have so far https://codepen.io/anon/pen/xvGMwa. The issue I have is that the "links" aren't associated with the nodes. So I can't easily find a group of nodes and their links and hide/show them.

What I'd like is for it to start off with just the first 4 nodes and then be able to click an action on the node to show/hide its children. I'd ideally do this with CSS.

The nearest I've found is this example but it's not really what I want:

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

Weirdly, the example from Highcharts here https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/series-networkgraph/data-options/ has ids on the links. But my example doesn't. I don't know why that is? I think if I had ids on my links then it'd be easier to find them and hide/show them.

回答1:

By clicking on the node you can find its links in point.linksTo and point.linksFrom arrays.

To show and hide them just use Highcharts.SVGElement.hide() and Highcharts.SVGElement.show() methods. Check demo and code posted below.

Code:

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();
          })
        }
      }
    }
  }
  ...
}]

Demo: