CODEWITHSUNDEEP
highcharts
user2146441
user2146441

Reputation: 228

Override default highlighting on hover in networkgraph

I'm drawing a binomial tree using a network graph by fixing initial positions for each node.

If I hover over a node, it highlights each node that's connected to that node by default.

How can I override this to highlight only the antecedent nodes (i.e. from right to left through the paths from the hovered node back to the single node on the far left).

I tried picking up the previous two nodes on the end of the links connected to the hovered node, and continuously iterating until there's no more antecedent nodes, but it's not working out.

    function iterateBack(node) {
      console.log("Node " + node.id);
      var previousNodes = node.linksTo
      if (previousNodes != null) {
        previousNodes.forEach(function(l) {
          var precedingNode = l.fromNode;
          precedingNode.update({
            //color: 'black',
            active: true
          });
          iterateBack(precedingNode);
        });
      }
    }



    Highcharts.chart('container', {
      tooltip: {
        enabled: false
      },
      credits: {
        enabled: false
      },
      chart: {
        type: 'networkgraph',
        margin: 20,
        height: '100%',
      },
      plotOptions: {
        series: {
          cursor: 'crosshair',
          stickyTracking: false,
          point: {
            events: {
              mouseOver: function() {
                //this.active = true;
                iterateBack(this);
                this.linksFrom.forEach(function(l) {
                  l.update({
                    active: false
                  });
                });
              },
              mouseOut: function() {
                this.linksTo.forEach(function(l) {
                  l.update({
                    active: false
                  });
                });
                this.linksFrom.forEach(function(l) {
                  l.update({
                    active: false
                  });
                });
              }
            }
          },
        }
      },
      series: [{
        marker: {
          radius: 15,
          lineWidth: 2,
          lineColor: 'black',
        },
        layoutAlgorithm: {
          maxIterations: 1,
          initialPositions: function() {
            var chart = this.series[0].chart,
              width = chart.plotWidth,
              height = chart.plotHeight;

            this.nodes.forEach(function(node, i) {
              var initialX = 0;
              var initialY = 500;
              var distance = 80;
              var identifiers = node.id.split(",");
              var round = identifiers[0] - 1;
              var level = identifiers[1] - 1;
              node.plotX = initialX + (round * distance * 2);
              node.plotY = initialY - (round * distance) + (level * 2 * distance);
            });
          }
        },
        keys: ['from', 'to'],
        data: [
          ['1,1', '2,1', 'win'],
          ['1,1', '2,2', 'win'],

          ['2,1', '3,1', 'win'],
          ['2,1', '3,2', 'lose'],
          ['2,2', '3,2', 'win'],
          ['2,2', '3,3', 'lose'],

          ['3,1', '4,1', 'win'],
          ['3,1', '4,2', 'lose'],
          ['3,2', '4,2', 'win'],
          ['3,2', '4,3', 'lose'],
          ['3,3', '4,3', 'win'],
          ['3,3', '4,4', 'lose'],

          ['4,1', '5,1', 'win'],
          ['4,1', '5,2', 'lose'],
          ['4,2', '5,2', 'win'],
          ['4,2', '5,3', 'lose'],
          ['4,3', '5,3', 'win'],
          ['4,3', '5,4', 'lose'],
          ['4,4', '5,4', 'win'],
          ['4,4', '5,5', 'lose'],

          ['5,1', '6,1', 'win'],
          ['5,1', '6,2', 'lose'],
          ['5,2', '6,2', 'win'],
          ['5,2', '6,3', 'lose'],
          ['5,3', '6,3', 'win'],
          ['5,3', '6,4', 'lose'],
          ['5,4', '6,4', 'win'],
          ['5,4', '6,5', 'lose'],
          ['5,5', '6,5', 'win'],
          ['5,5', '6,6', 'lose']
        ],
        nodes: [{
            id: '1,1'
          },
          {
            id: '2,1'
          },
          {
            id: '2,2'
          },
          {
            id: '3,1'
          },
          {
            id: '3,2'
          },
          {
            id: '3,3'
          },
          {
            id: '4,1'
          },
          {
            id: '4,2'
          },
          {
            id: '4,3'
          },
          {
            id: '4,4'
          },
          {
            id: '5,1'
          },
          {
            id: '5,2'
          },
          {
            id: '5,3'
          },
          {
            id: '5,4'
          },
          {
            id: '5,5'
          },
          {
            id: '6,1'
          },
          {
            id: '6,2'
          },
          {
            id: '6,3'
          },
          {
            id: '6,4'
          },
          {
            id: '6,5'
          },
          {
            id: '6,6'
          }
        ],
      }]
    })

Upvotes: 0

Views: 89

Answers (1)

ppotaczek
ppotaczek

Reputation: 39069

Overwrite the default setState method from networkgraph Point class prototype and use your iterateBack function in mouse over event.

(function(H) {
    H.seriesTypes.networkgraph.prototype.pointClass.prototype.setState = function() {
        H.Point.prototype.setState.apply(this, arguments);
    }
}(Highcharts));

Live demo: https://jsfiddle.net/BlackLabel/ua72mrqp/

Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

Upvotes: 1

Related Questions