reactjs - 海图 | 网络图 - 有没有办法在单击父节点时展开叶节点？

Question

海图 | 网络图 - 有没有办法在单击父节点时展开叶节点？

示例代码`Highcharts.addEvent( Highcharts.Series, 'afterSetOptions', function (e) { var colors = Highcharts.getOptions().color i = 0, nodes = {};

    if (
        this instanceof Highcharts.seriesTypes.networkgraph &&
        e.options.id === 'lang-tree'
    ) {
        e.options.data.forEach(function (link) {

            if (link[0] === 'Parent') {
                nodes['Parent'] = {
                    id: 'Parent',
                    marker: {
                        radius: 20
                    }
                };
                nodes[link[1]] = {
                    id: link[1],
                    marker: {
                        radius: 10
                    },
                    color: colors[i++]
                };
            } else if (nodes[link[0]] && nodes[link[0]].color) {
                nodes[link[1]] = {
                    id: link[1],
                    color: nodes[link[0]].color
                };
            }
        });

        e.options.nodes = Object.keys(nodes).map(function (id) {
            return nodes[id];
        });
    }
}

);`

标签： reactjshighcharts

Answer 1

目前，如果没有任何自定义，此功能无法从 API 选项中实现。

请查看此演示，您可以在其中找到一些自定义函数来折叠click事件中的子节点：https ://jsfiddle.net/BlackLabel/9mv0ny3j/

point: {
  events: {
    click: function() {
      var point = this;
      point.linksFrom.forEach(link => {
        if (link.toNode.isHidden) {
            link.graphic.show();
          link.toNode.graphic.css({
            opacity: 1
          });
          link.toNode.dataLabel.css({
            opacity: 1
          })
          link.toNode.isHidden = false;
        } else {
          link.graphic.hide();
          link.toNode.graphic.css({
            opacity: 0
          });
          link.toNode.dataLabel.css({
            opacity: 0
          })
          link.toNode.isHidden = true;
        }
      })
    }
  }
},

API：https ://api.highcharts.com/highcharts/series.line.events.click