6

问候，

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

这就是他们在示例中的做法：

<!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 画布应显示/绘制为弹出窗口的内容。我加载的相关选项 this.state.options是：

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

然而，弹出消息永远不会出现。我试图检查弹出事件是否真的发生了，而且似乎确实发生了，因为showPopupvis.js 的事件（在显示弹出窗口时发生）确实被触发了，我放入其中的 console.log 运行，但是弹出窗口仍然没有真正出现在屏幕上。

理论上，在 ReactJS 中，我使用NodeGraph足够的数据来绘制图形，它应该与这条线基本相同：

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

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

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

谢谢，

巴林特

4

3 回答 3

5

最干净的方法，

在你的 index.css 文件中添加这一行：

@import url("~vis/dist/vis.min.css");
于 2019-01-07T13:19:45.947 回答
3

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

在你的 CSS 集中.vis-network: {overflow:visible;}

于 2018-08-21T18:43:14.703 回答
1

不久前我也遇到了这个问题。它与 vis-network.min.css 的路径不正确有关。

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

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

于 2018-03-13T18:28:47.477 回答