微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决如何覆盖 Hihgchart.js 网络图默认节点悬停效果?

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

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

Error[Pe137]: expression must be a modifiable lvalue

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

解决方法

最简单的解决方案是覆盖默认的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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。