Get node coordinates

148 views
Skip to first unread message

Bart

unread,
Dec 1, 2009, 3:41:00 PM12/1/09
to JavaScript Information Visualization Toolkit
Hi. I'm trying to implement a suggestion a while back to drag a
hypergraph around the screen and to open the node closest to the
center of the screen when the drag is stopped. When I use the getc()
function in the node onClick handler, the complex numbers returned are
always less than 1.

For example, when I click on a node in the lower half of the infovis
div, the x,y Cartesian coordinates are 359, 441. But the onClick
handler reports a position of
0.20664905347714885,0.49889494755609476.

Is there a way to convert the getc() function's pos to x,y coordinates
and vice versa so I can open the node closest to the center of the
screen open?

Bart

Bart

unread,
Dec 4, 2009, 9:35:49 AM12/4/09
to JavaScript Information Visualization Toolkit
I'll reply to myself with my solution to this, in case anyone else
tries doing something similar.

Trying to get a node's coords wound up not being necessary. What I did
is use jquery to monitor the mouse dragging, then calculating a new
center point for the graph, dividing the new center by a very large
number to decrease mouse sensitivity, and then call ht.move
(newCenter).

Here's the code:

//center point of graph; dictated by 1/2 of height and width values in
stylesheet;
var xCenter = 300, yCenter = 300;
//radius - make large to decrease mouse sensitivity. also based on
radius of graph, including 1/2 of 50px padding added in hypergraph.js
var radius = -2750;
//vars for mouse x,y coords
var mouseX, mouseY, mouseUpX, mouseUpY, mouseDownX, mouseDownY;
var newCartCenter = new Object();

//jquery dragging functions
$(function() {
$('#center-container').mousemove(function(e){
var offset = $('#center-container').offset();
var x = e.pageX - offset.left;
var y = e.pageY - offset.top;
mouseX = x - xCenter;
mouseY = y - yCenter;

}); //end of mouse move function

$("#infovis").draggable({
containment: '#center-container',
scroll: false,
start: function() { //start position of mouse
mouseDownX = mouseX;
mouseDownY = mouseY;
},
drag: function() {
mouseUpX = mouseX;
mouseUpY = mouseY;
findNewCartesianCenter();
ht.move(newCartCenter, {duration:1,fps:100});
}
/*,
stop: function() { //end position of mouse
mouseUpX = mouseX;
mouseUpY = mouseY;
findNewCartesianCenter();
ht.move(newCartCenter);
}
*/
}); //end of dragging function
});//end of jquery functions

//find where user stopped dragging, in coordinate system of graph
function findNewCartesianCenter() {
var x = mouseUpX - mouseDownX;
var y = mouseUpY - mouseDownY;
newCartCenter.x = x/radius;
newCartCenter.y = y/radius;
}

Bart
Reply all
Reply to author
Forward
0 new messages