时间戳

首页 > 解决方案 > 如何覆盖 Hihgchart.js 网络图默认节点悬停效果？

javascript - 如何覆盖 Hihgchart.js 网络图默认节点悬停效果？

问题描述

我需要覆盖 Highchart.js 中网络图上的默认节点悬停效果。默认行为是，当您将鼠标悬停在节点上时，linkedTo 和 linkedFrom 节点会突出显示，所需的行为是当我将鼠标悬停在节点上时，只会突出显示linkedFrom 节点，基本上就像广度优先搜索可视化，我'已经设法编写了算法，但突出显示了一些额外的节点。

这是我用来突出显示所有节点的算法，但这不会覆盖默认功能

point: {
        events: {
          mouseOver: function () {
            var point = this,
              chart = this.series.chart,
              nodes = chart.series[0].nodes;


            bfs(this.id);

            function bfs(start) {
              const queue = [findNodeById(start)];

              // Store visited nodes in a set
              const visited = new Set();
              // Loop until we have something in the queue
              while (queue.length > 0) {

                // Pop out first element from queue
                const topNode = queue.shift();

                // Edges TO first element
                const prevEdges = topNode.linksTo;

                for (const edge of prevEdges) {
                  // For each edge find their corresponding nodes and set their state to 'hover'
                  let prevNode = findNodeById(edge.from);
                  prevNode.setState("hover");

                  // If edge is not visited yet, push to Set and add to queue
                  if (!visited.has(prevNode)) {
                    visited.add(prevNode);
                    queue.push(prevNode);
                  }
                  // nextNode.setState('inactive')
                }

 
              }
            }
           
            function findNodeById(id) {
              return nodes.filter((node) => node.id == id)[0];
            }
          },
        },
      },

我试图禁用/启用悬停状态，但没有奏效。我的方法在这里可能完全错误，任何建议表示赞赏！

标签： javascriptgraphhighchartsdata-visualizationbreadth-first-search

解决方案

最简单的解决方案是覆盖默认setState函数，例如：

(function(H) {
  H.seriesTypes.networkgraph.prototype.pointClass.prototype.setState = function(state) {
    var args = arguments,
      Point = H.Point,
      others = this.isNode ? this.linksTo.concat(this.linksFrom) : [this.fromNode,
        this.toNode
      ];

    if (state !== 'select') {
      others.forEach(function(linkOrNode) {
        if (linkOrNode && linkOrNode.series) {
          Point.prototype.setState.apply(linkOrNode, args);

          if (!linkOrNode.isNode) {
            if (linkOrNode.fromNode.graphic) {
              Point.prototype.setState.apply(linkOrNode.fromNode, args);
            }
                        
        /* Modification - prevent hover effect on toNode
            if (linkOrNode.toNode && linkOrNode.toNode.graphic) {
              Point.prototype.setState.apply(linkOrNode.toNode, args);
            }
        */
          }
        }
      });
    }
    Point.prototype.setState.apply(this, args);
  }
}(Highcharts));

现场演示： https ://jsfiddle.net/BlackLabel/1039zwbt/1/

文档： https ://www.highcharts.com/docs/extending-highcharts/extending-highcharts

推荐阅读