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

Question

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

5

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

当前，当鼠标光标移动时，提示框会随之移动，因此无法复制其中的文本！提示框应该是“固定”的，不应该移动，以便用户能够使用鼠标“捕捉它”，并复制（和稍后粘贴）其中的文本。

这是标准 JavaScript代码，在其中，默认情况下，提示框/弹出窗口会“逃离”鼠标。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.2.0/vis.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.2.0/vis.min.css" rel="stylesheet" type="text/css" />

...
  <style type="text/css">
    #mynetwork {
      position:relative;
      width: 600px;
      height: 400px;
      border: 1px solid lightgray;
    }
<script type="text/javascript">
// create an array with nodes
var nodes = new vis.DataSet([
{id: 1, label: 'Node 1', title:'popup'},
{id: 2, label: 'Node 2', title:'popup'},
{id: 3, label: 'Node 3', title:'popup'},
{id: 4, label: 'Node 4', title:'popup'},
{id: 5, label: 'Node 5', title:'popup'}
]);

// create an array with edges
var edges = new vis.DataSet([
{from: 1, to: 3, title:'popup'},
{from: 1, to: 2, title:'popup'},
{from: 2, to: 4, title:'popup'},
{from: 2, to: 5, title:'popup'},
{from: 3, to: 3, title:'popup'}
]);

// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {};
var network = new vis.Network(container, data, options);
</script>

- durila

你能解决这个问题吗？我也卡在类似的地方了。 - monica

2个回答

0

看起来你需要除了工具提示之外的其他东西。在这种情况下，我认为点击比悬停更适合显示弹出窗口。我建议你按照以下步骤操作：

向你的网络添加点击事件，这应该会打开一个弹出窗口，你应该将其设置在你的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  
});

以这种方式，您将对弹出窗口拥有完全的控制。

查看此示例，

并使用此文档。

- TERMIN

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mike · Accepted Answer

我同意Termin的观点，使用点击事件并在画布上绘制一个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);
}