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

Question

如何使用 javascript 在 vi​​s.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>

Answer 1

我同意 Termin，使用点击事件并在 Canvas 上绘制一个 div。

找到点击位置对我来说是困难的部分。 Vis.js 在 Canvas 内提供 x、y 方面做得很好，但您需要 DOM 中的 Canvas 位置才能使其正常工作。 jQuery 非常适合在页面上定位，所以我用它来找到 Canvas 的位置并找到 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);
}