Question

问候语，

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

他们就是这样做的例子：

<!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
},

然而，弹出消息并没有显示出来。我试图检查弹出事件是否真的发生了，而且看起来确实如此，因为当显示弹出窗口时会发生vis.js的showPopup事件， - 会被触发， console.log我投入运行，但弹出窗口仍然没有实际显示在屏幕上。

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

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

但显然弹出的东西在ReactJS版本中丢失了，除非原因是我做错了。

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

谢谢，

巴林特

Answer 1

Cleanest way to do it,

in your index.css file add this line:

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

Answer 2

默认情况下，css会隐藏工具提示。

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

中

Answer 3

我曾经有过这个问题。它与vis-network.min.css的错误路径有关。

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

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

使用ReactJS

3 个答案: