getPositions returns wrong coordinates

[clem-41]

I want to make a popup appear at the position of a node when I click on the node.

I used the getPositions() method but the popup appears in the wrong place (too much on the left and top corner), as if the coordinates were incorrect (and it seems like the positions returned are not the same scale as the network since the offset is different for every node).

Here is the function I used:

network.on("click", function (params) {
	// Sélection du node cliqué
	var nodeId = params.nodes[0];
	if (nodeId) {
		// On récupère le title du node
		var popup = this.body.nodes[nodeId].options.title;

		// On prend les coordonnées du node
		var nodePosition = network.getPositions(nodeId);
		var nodeX = nodePosition[nodeId].x;
		var nodeY = nodePosition[nodeId].y;
			
		// On affiche le contenu du title dans une div de la page auquel on ajoute une icone qui permet de fermer le popup au clic
		document.getElementById('popup').innerHTML = popup+"<div class='close'><a href='#' onclick='this.parentNode.parentNode.style.display = \"none\"'>X</a></div>";
		// On affiche la div
		document.getElementById('popup').style.display = "block";
		// On place la div
		document.getElementById('popup').style.position = "absolute";
		document.getElementById('popup').style.top = nodeY+'px';
		document.getElementById('popup').style.left = nodeX+'px';
	}
});

I posted on Stack Overflow but no one was able to help me and they suggested it was a bug; is it?
How can I get the correct positions of the nodes?

[Thomaash]

I don’t have time to look at it right now but have you tried CanvasToDOM conversion?

…

On Thu, Oct 10, 2019, 11:59 clem-41 ***@***.***> wrote: I want to make a popup appear at the position of a node when I click on the node. I used the getPositions() method but the popup appears in the wrong place (too much on the left and top corner), as if the coordinates were incorrect (and it seems like the positions returned are not the same scale as the network since the offset is different for every node). Here is the function I used: network.on("click", function (params) { // Sélection du node cliqué var nodeId = params.nodes[0]; if (nodeId) { // On récupère le title du node var popup = this.body.nodes[nodeId].options.title; // On prend les coordonnées du node var nodePosition = network.getPositions(nodeId); var nodeX = nodePosition[nodeId].x; var nodeY = nodePosition[nodeId].y; // On affiche le contenu du title dans une div de la page auquel on ajoute une icone qui permet de fermer le popup au clic document.getElementById('popup').innerHTML = popup+"<div class='close'><a href='#' onclick='this.parentNode.parentNode.style.display = \"none\"'>X</a></div>"; // On affiche la div document.getElementById('popup').style.display = "block"; // On place la div document.getElementById('popup').style.position = "absolute"; document.getElementById('popup').style.top = nodeY+'px'; document.getElementById('popup').style.left = nodeX+'px'; } }); You can see the rest of the code on this live example: http://clemsmusic.com/thechart/test.html I posted on Stack Overflow <https://stackoverflow.com/questions/58251051/vis-js-network-incorrect-node-coordinates-with-getpositions> but no one was able to help me and they suggested it was a bug; is it? How can I get the correct positions of the nodes? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#155?email_source=notifications&email_token=ADC5WZMKVUCBRR3CYHVN3ILQN34HZA5CNFSM4I7KT7IKYY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4HQ4GUUQ>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADC5WZN6OVEK2DZTFSO52MDQN34HZANCNFSM4I7KT7IA> .

[clem-41]

No I haven't, I'm not sure how to use it?

[Thomaash]

const domPosition = network.canvasToDOM(nodePositions[nodeId]);

For more details see the method reference on https://visjs.github.io/vis-network/docs/network/#methods.

[Thomaash]

Hi @clem-41,

is there still in issue or was it solved by converting the coords? If it was solved close this issue please.

[clem-41]

I couldn’t do it so I kind of gave up and got around the problem by doing something different than what I initially planned.
But technically it’s still an issue.

[clem-41]

Turns out my plan B is not a good solution for me. So back to plan A, which is this.
Can anyone help me? I'm not very good at javascript and I did read the documentation (and the issue referenced by UnicornDeluxe) but often I don't know how to apply the methods to my code, so if anyone would be kind enough to maybe give me an example using my code it would be really helpful.

[Thomaash]

It's really difficult to help if you supply no code.

[Thomaash]

In case you meant the original code it should look similar to:

network.on("click", function(params) {
  // Sélection du node cliqué
  var nodeId = params.nodes[0];
  if (nodeId) {
    // On récupère le title du node
    var popup = this.body.nodes[nodeId].options.title;

    // On prend les coordonnées du node
    var { x: nodeX, y: nodeY } = network.canvasToDOM(
      network.getPositions([nodeId])[nodeId]
    );

    // On affiche le contenu du title dans une div de la page auquel on ajoute une icone qui permet de fermer le popup au clic
    document.getElementById("popup").innerHTML =
      popup +
      "<div class='close'><a href='#' onclick='this.parentNode.parentNode.style.display = \"none\"'>X</a></div>";
    // On affiche la div
    document.getElementById("popup").style.display = "block";
    // On place la div
    document.getElementById("popup").style.position = "absolute";
    document.getElementById("popup").style.top = nodeY + "px";
    document.getElementById("popup").style.left = nodeX + "px";
  }
});

[clem-41]

Yes I meant the original code!
Thanks for your answer, it does work on a basic network, the only problem is that I use the fit method to center and zoom on the clicked node. And with the code you provided, the popup appears at the inital position of the node, but then the network moves and the popup is no longer in the right place... is there any way I can adapt your code to apply it once the fit method has occured?

Here is my code for the fit method:

	network.on("click", function(e) {
		  // Si on clique ailleurs que sur un node, on recentre sur l'ensemble du network
		  if (e.nodes.length !== 1) {
			network.fit({
				animation: {
				duration: 600,
				easingFunction: "easeOutQuint" }
			});
			return;
		  }
		  var nodeId = e.nodes[0];
		  // ZOOM SUR UN NODE
		  // On centre la vue sur le node avec une animation
			network.fit({
			nodes: [nodeId],
			animation: {
			duration: 600,
			easingFunction: "easeOutQuint" }
		  });

[Thomaash]

You're welcome.

You have to update the position of the popup whenever the canvas is moved, zoomed etc. You can just store the id of the node and reposition the popup using the same method as for the initial positioning. But this is a StackOverflow question not an issue.