Showing/Hiding child nodes and links in Highcharts Networkgraph

匆匆过客 提交于 2021-02-11 14:29:57

问题


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:

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

API reference:

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

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



来源:https://stackoverflow.com/questions/57135011/showing-hiding-child-nodes-and-links-in-highcharts-networkgraph

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!