Javascript 为什么不';我的节点悬停弹出窗口不能在我的vis.js网络中工作吗?

Javascript 为什么不';我的节点悬停弹出窗口不能在我的vis.js网络中工作吗?,javascript,node.js,typescript,vis.js,vis.js-network,Javascript,Node.js,Typescript,Vis.js,Vis.js Network,我遇到了一个问题,尽管在我的节点对象中包含了“title”属性,但当我将鼠标悬停在节点上时,不会显示包含标题内容的弹出窗口 以下是我的选项以及我如何设置网络 setUpNetwork(){ let container = document.getElementById('mynetwork'); //These options dictate the dynamic of the network let options = { nodes: {

我遇到了一个问题,尽管在我的节点对象中包含了“title”属性,但当我将鼠标悬停在节点上时,不会显示包含标题内容的弹出窗口

以下是我的选项以及我如何设置网络

setUpNetwork(){
    let container = document.getElementById('mynetwork');
    //These options dictate the dynamic of the network
    let options = {
        nodes: {
            shape: 'box'
        },
        interaction: {
            dragNodes: false,
            dragView: false,
            hover: true
        },
        layout: {
            randomSeed: undefined,
            improvedLayout: true,
            hierarchical: {
                enabled: true,
                levelSeparation: 180,
                nodeSpacing: 180,
                edgeMinimization: true,
                parentCentralization: true,
                direction: 'UD', // UD, DU, LR, RL
                sortMethod: 'directed' // hubsize, directed
            }
        },
        physics: {
            enabled: false
        }
    }
    // initialize your network!
    this.network = new vis.Network(container, this.data, options);
}
将节点添加到网络的节点列表时,这是我的结构:

addNode(node: any){
    try {
        this.data.nodes.add({
            id: node.id,
            color: node.color,
            title: node.title,
            label: node.label
        });
        this.network.fit();
    }
    catch (err) {}
}
我运行代码所处的环境使得很难实时提供此问题的示例。网络中的其他一切都正常工作(标签、id、颜色),只是当我将鼠标悬停在节点上时标题不正常

编辑

我从弹出窗口工作的vis.js复制了这段代码

// 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}};
this.network = new vis.Network(container, data, options);
我试着在我的环境中只使用它;但是,弹出窗口并不像示例中那样显示。我知道我的悬停事件是有效的,因为我在将鼠标悬停在节点上时包含了要打印到控制台的以下代码:

this.network.on("showPopup", function (params) {
    console.log("DO SOMETHING");
})

这里有没有我遗漏的选项设置?是否存在其他问题,即尽管在我的节点对象中包含了“title”属性,但为什么我的悬停弹出窗口不显示?

因为您正在使用“事件打开”(“showPopup”)而没有显示任何内容。您必须在(“hoverNode”)上使用。所以使用

要添加节点,最好使用

nodes.add()

没有显示任何内容,因为您正在使用上的事件(“showPopup”)。您必须在(“hoverNode”)上使用。所以使用

要添加节点,最好使用

nodes.add()

我也有同样的问题。就我而言,这是一个css问题。确保正确导入vis.min.css。我在链接语句中有一个输入错误。

我也有同样的问题。就我而言,这是一个css问题。确保正确导入vis.min.css。我在link语句中输入了一个错误。

这是因为您可能没有导入vis网络CSS。 您可以导入独立版本的vis网络,它将自动导入CSS

import { Network } from 'vis-network/standalone';

这是因为您可能没有导入vis网络CSS。 您可以导入独立版本的vis网络,它将自动导入CSS

import { Network } from 'vis-network/standalone';

你能解决这个问题吗?我也面临同样的问题。请问你能解决这个问题吗?我也面临同样的问题。请不要使用这些悬停函数显示helpTitle,因为我们正在定义标题。但它没有表现出来。不确定是什么问题。遇到了同样的问题。在定义标题时,应该在不使用这些悬停函数的情况下显示标题。但它没有表现出来。不确定是什么问题。陷入了同样的问题。