(Сеть Vis.js) Неправильные координаты узла с getPositions? - PullRequest
Новая
       44

(Сеть Vis.js) Неправильные координаты узла с getPositions?

0 голосов
/ 05 октября 2019

В моей vis.js сети я хочу, чтобы при нажатии на узел появлялось всплывающее окно в позиции узла.

Я использовал метод getPositions , но всплывающее окно появляется не в том месте (слишком много в левом и верхнем углу), как если бы координаты были неправильными. 

network.on("click", function (params) {
        // Get the node ID
        var nodeId = params.nodes[0];
        if (nodeId) {

            // Get the node title to show in the popup
            var popup = this.body.nodes[nodeId].options.title;

            // Get the node coordinates
            var nodePosition = network.getPositions(nodeId);
            var nodeX = nodePosition[nodeId].x;
            var nodeY = nodePosition[nodeId].y;

            // Show the tooltip in a div
            document.getElementById('popup').innerHTML = popup;
            document.getElementById('popup').style.display = "block";
            // Place the div
            document.getElementById('popup').style.position = "absolute";
            document.getElementById('popup').style.top = nodeY+'px';
            document.getElementById('popup').style.left = nodeX+'px';

        }
    });
    // Empty and hide the div when click elsewhere
    network.on("deselectNode", function (params) {
        document.getElementById('popup').innerHTML = null;
        document.getElementById('popup').style.display = "none";
    });

Ответы [ 2 ]

0 голосов
/ 16 октября 2019

Я получил некоторую помощь в разделе поддержки vis на github . Оказывается, хитрость была в том, чтобы использовать canvasToDOM().

Вот как это применимо к моему коду: 

network.on("click", function(params) {
  // Get the node ID
  var nodeId = params.nodes[0];
  if (nodeId) {
    // Get the node title to show in the popup
    var popup = this.body.nodes[nodeId].options.title;

    // Get the node coordinates
    var { x: nodeX, y: nodeY } = network.canvasToDOM(
      network.getPositions([nodeId])[nodeId]
    );

    // Show the tooltip in a div
    document.getElementById("popup").style.display = "block";
    // Place the div
    document.getElementById("popup").style.position = "absolute";
    document.getElementById("popup").style.top = nodeY + "px";
    document.getElementById("popup").style.left = nodeX + "px";
  }
});

Это работает, когда сеть остается на месте, но в моем случае я хочу соответствоватьсеть и увеличьте масштаб на выбранном узле, чтобы всплывающее окно не появлялось, но поскольку это отдельная проблема, я опубликую еще один вопрос.

0 голосов
/ 07 октября 2019

Вы используете network.getPositions (params.nodes [0]), но поскольку узлы могут сильно измениться при увеличении и уменьшении и перемещении сети на холсте, каким-то образом позиции не соответствуют реальной позиции узла. ,Я не знаю, является ли это ошибкой в ​​visjs или есть какая-то другая причина для этого. Документы говорят, что они возвращают положение узла в пространстве холста. Но это явно не тот случай в вашем примере.

Глядя на документы [https://visjs.github.io/vis-network/docs/network/#Events] аргумент события click содержит: 

{
    nodes: [Array of selected nodeIds],
    edges: [Array of selected edgeIds],
    event: [Object] original click event,
    pointer: {
        DOM: {x:pointer_x, y:pointer_y},     // << Try using this values
        canvas: {x:canvas_x, y:canvas_y}
    }
}

Попробуйте использовать params.pointer.DOM или params.pointer.canvas позиции X и Y для позиционирования вашего всплывающего окна. Это должно быть расположение курсора. Это будет та же позиция, что и у узла, поскольку вы щелкнули по нему.

Поэтому попробуйте что-то вроде: 

    document.getElementById('popup').style.top = params.pointer.DOM.y +'px';
    document.getElementById('popup').style.left = params.pointer.DOM.x +'px';

- Не проверено

...