Vis.js 使用 ReactJS 悬停时不显示节点工具提示

Question

您好，

在我的项目中，我使用 ReactJS 显示一个 vis.js 图表，我希望显示的网络节点通过显示 popup/tooltip 来对 mouse-hover 事件做出反应.每个节点都有一个标题属性，这就是工具提示应该显示的内容。

他们在示例中是这样做的：

<!doctype html>
<html>
<head>
    <title>Network | Interaction events</title>
    <script type="text/javascript" src="../../../dist/vis.js"></script>
    <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        #mynetwork {
            width: 600px;
            height: 400px;
            border: 1px solid lightgray;
        }
    </style>
</head>
<body>
    <div id="mynetwork"></div>
    <script type="text/javascript">
        // create an array with nodes
        var nodes = new vis.DataSet([
            { id: 1, label: 'Node 1', title: 'I have a popup!' },
            { id: 2, label: 'Node 2', title: 'I have a popup!' },
            { id: 3, label: 'Node 3', title: 'I have a popup!' },
            { id: 4, label: 'Node 4', title: 'I have a popup!' },
            { id: 5, label: 'Node 5', title: 'I have a popup!' }
        ]);
        // create an array with edges
        var edges = new vis.DataSet([
            { from: 1, to: 3 },
            { from: 1, to: 2 },
            { from: 2, to: 4 },
            { from: 2, to: 5 }
        ]);
        // create a network
        var container = document.getElementById('mynetwork');
        var data = {
            nodes: nodes,
            edges: edges
        };
        var options = {
            interaction: { hover: true },
            manipulation: {
                enabled: true
            }
        };
        var network = new vis.Network(container, data, options);
    </script>
</body>
</html>

弹出窗口在这里起作用。

我正在从数据库中加载与节点相关的数据，根据该数据绘制节点就好了。一切正常，除了在悬停事件触发时弹出窗口不显示。这是 component.tsx 文件的相关部分：

import * as React from 'react';
import NodeGraph from 'react-graph-vis';
import { IEdge, ISkill } from '../../../models';
import Options from './skillTree.options';
import Props from './skillTree.props';
import State from './skillTree.state';

export default class extends React.Component<Props, State> {
constructor(props) {
    super(props);
    this.state = {
        graph: { nodes: [], edges: [] },
        options: Options,
        selectedNode: undefined,
    }
}
//...
private _skillTreeRequestCallback(graph: {
    nodes: ISkill[],
    edges: IEdge[]
}) {
    graph.nodes = graph.nodes.map(skill => ({
        ...skill,
        hidden: skill.Hidden,
        image: skill.Image,
        label: skill.Label,
        id: skill.Id,
        title: "Hardcoded popup message"
    }));
    graph.edges = graph.edges.map(edge => ({
        ...edge,
        from: edge.From,
        to: edge.To
    }));
    this.setState({ graph, isLoading: false });
}
//...
public render() {
    return (this.state.graph.nodes.length > 0 ? <main style={this.props.style} >
        <NodeGraph graph={this.state.graph} options={this.state.options}/>
    </main> : <LoadingView style={this.props.style} />);
}

并且数据从数据库中正常到达。节点的标题属性在那里，我可以在查询后登录到控制台运行。该标题属性是 vis.js canvas 应该 display/draw 作为悬停事件被触发时的弹出窗口。我从 this.state.options 加载的相关选项是：

interaction: {
    hover: true
},
manipulation: {
    enabled: true
},

但是弹出消息从未出现过。我试图检查弹出事件是否真的发生了，看起来它确实发生了，因为 vis.js 的 showPopup 事件，-显示弹出窗口时发生-确实触发了，我输入的 console.log 运行了，但是弹出窗口仍然实际上 出现在屏幕上。

理论上，在 ReactJS 中，我使用 NodeGraph 绘制具有足够数据的图形，它应该做与这一行基本相同的事情：

 var network = new vis.Network(container, data, options);

但显然在 ReactJS 版本中弹出窗口的某些内容丢失了，除非原因是我做错了什么。

有人知道有什么解决方案可以帮助我在 ReactJS 中显示带有悬停事件的 vis.js 图表的标题工具提示吗？非常感谢任何帮助。

谢谢，

巴林特

Answer 1

不久前我也遇到了这个问题。这与 vis-network.min.css.

的路径不正确有关

在示例中，他们这样做： <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />

但在您自己的项目中，这可能不是正确的路径。检查您的路径，这应该可以解决您的问题。

Answer 2

奇怪的是，默认情况下 css 隐藏了工具提示。

在您的 CSS 中设置 .vis-network: {overflow:visible;}

Answer 3

最干净的方法，

在您的 index.css 文件中添加此行：

@import url("~vis/dist/vis.min.css");

Vis.js 使用 ReactJS 悬停时不显示节点工具提示

Vis.js node tooltip doesn't show up on hover using ReactJS

javascript

reactjs

vis.js

vis.js-network