Question

如何使用javascript获取vis.js网络中工具提示/弹出窗口的“固定”位置（例如节点/边缘的中心）？

现在，工具提示随着鼠标光标的移动而移动，因此无法复制工具提示中的文本！工具提示应该是“修复”而不是移动，以便允许用户使用鼠标“抓住它”并复制（并粘贴它）其中的文本。

以下是标准 Javascript代码，其中默认工具提示/弹出窗口是从鼠标“逃跑”。

Answer 1

似乎你需要其他东西然后工具提示。在这种情况下，我认为点击比悬停显示弹出窗口更好。我建议你这样做：

将click evet添加到您的网络中，这应该打开一个你应该在你的html上设置的弹出窗口。

network.on("click", function (params) {
    // your element, edge or node
    // set the popup position by getting the params.pointer attr
    // handle the toggle behavior  
});

通过这种方式，您可以完全控制弹出窗口。

请参阅此example，

并使用此doc

Answer 2

我同意Termin，使用click事件并在画布上绘制div。

找到点击位置对我来说很难。 Vis.js在画布中提供x，y非常出色，但是你需要DOM中的画布位置才能使它全部工作。 jQuery在页面上的位置很棒，所以我用它来找到画布的位置并找到div。

network.on('click', function (properties) {
        var nodeID = properties.nodes[0];
        if (nodeID) {

            var sNodeLabel = this.body.nodes[nodeID].options.label
            var sToolTip = this.body.nodes[nodeID].options.title;

            //use JQUERY to see where the canvas is on the page.
            var canvasPosition = $('.vis-network').position();

            //the properties give x & y relative to the edge of the canvas, not to the whole document.
            var clickX = properties.pointer.DOM.x + canvasPosition.top;
            var clickY = properties.pointer.DOM.y + canvasPosition.left;

        //make sure we have a valid div, either clear it or generate one.
            if ($('#cellBatchAttrPopUp').length) {
                $('div#cellBatchAttrPopUp').empty();
            }
            else {
                $('<div id="cellBatchAttrPopUp"></div>').click(function () {
            //clicking the popup hides it again.
                    $(this).empty().hide();
                }).css('position','absolute').appendTo("body");
            }

            // put the div over the node, display the tooltip and show it.
            $('div#cellBatchAttrPopUp').append(sNodeLabel)
                       .append('<br/>')
                                       .append(sToolTip)
                           .css('top', clickY).css('left', clickX)
                           .show();

        }
    });

CSS使弹出窗口看起来不错，真的position: absolute;是唯一必不可少的东西。

div#cellBatchAttrPopUp {
    display: none;
    position: absolute;
    z-index: 2000;
    padding: 4px 8px;
    color: #333;
    white-space: nowrap;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0px 0px 4px #222;
    -webkit-box-shadow: 0px 0px 4px #222;
    box-shadow: 0px 0px 4px #222;
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
    background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}

vis.js network - 工具提示/弹出窗口的固定位置

2 个答案: