1

I have a graph that allows for zooming in and out on different nodes. To aid in selecting multiple nodes, I have integrated a drag-selection box shown here: http://bl.ocks.org/lgersman/5370827. This works perfectly when the user has not zoomed out of the graph, but once they do, everything becomes skewed.

I know that I need to take the scale into account, but I am not sure to properly factoring it in. The scale value goes from 1 (no zoom) to .1 (zoomed all the way out). Below is the snippet where the scale adjustment should go. I have tried multiplying it, adding it to both the size of the box and the X/Y, but have not identified the best spot.

var d = {
    x       : parseInt(s.attr("x"), 10),
    y       : parseInt(s.attr("y"), 10),
    width   : parseInt(s.attr("width"), 10),
    height  : parseInt(s.attr("height"), 10)
},
move = {
    x : p[0] - d.x,
    y : p[1] - d.y      
}
;

if( move.x < 1 || (move.x*2<d.width)) { //dragging to the left
    d.x = p[0];
    d.width -= move.x;
} else { //dragging to the right
    d.width = move.x;       
}

if( move.y < 1 || (move.y*2<d.height)) { //dragging up
    d.y = p[1];
    d.height -= move.y;
} else { //dragging down
    d.height = move.y;       
}

s.attr(d);
Famous Food Finder
  • 273
  • 1
  • 3
  • 8
  • 1
    It may be better to use a brush for this -- http://bl.ocks.org/mbostock/6216724 – Lars Kotthoff Jan 31 '14 at 20:03
  • 1
    Excellent! Appears to be a far cleaner solution. http://bl.ocks.org/mbostock/4560481 – Famous Food Finder Jan 31 '14 at 21:34
  • If you use a brush, and link both brush and zoom to x and y scales, that should handle all the calculations for you. *But,* if that doesn't end up suiting your needs [this rather long answer](http://stackoverflow.com/a/21356139/3128209) describes how to convert from mouse coordinates to data coordinates with or without scales. – AmeliaBR Jan 31 '14 at 21:43

0 Answers0