1

I have a problem with variables scope. In the code below, I have two variables that i want to assign them some values and then later in the code use these values. The variables are: eSVG, originMouse. I assign their values when I am using mousedown event function and then trying to use these values in mousemove event function but i always get undefined values. Could you please tell me what is happening here?

Thanks guys

var eSVG, originMouse;

svg.on("mousedown", function() {
     eSVG= this,  // svg element
     originMouse = d3.mouse(eSVG),  // mouse origing
     rect = svg.append("rect").attr("class", "zoom");
     originMouse[0] = Math.max(0, Math.min(width, originMouse[0]));
     originMouse[1] = Math.max(0, Math.min(height, originMouse[1]));
   })
.on("mousemove", function() {
    console.log(eSVG);                          **// undefined**
    var m = d3.mouse(eSVG);
    console.log(originMouse);                   **// undefined** 
    m[0] = Math.max(0, Math.min(width, m[0]));
    m[1] = Math.max(0, Math.min(height, m[1]));
    rect.attr("x", Math.min(originMouse[0], m[0])-130)
        .attr("y", Math.min(originMouse[1], m[1])-80)
        .attr("width", Math.abs(m[0] - originMouse[0]))
        .attr("height", Math.abs(m[1] - originMouse[1]));
  })
4
  • 2
    Are you sure mousedown is firing before mousemove?
    – Dogbert
    Commented Jun 12, 2013 at 9:39
  • it is a good question, i think thats the problem.. im gona give it a try thanks Dogbert
    – I3i0
    Commented Jun 12, 2013 at 9:47
  • yea sure thats the problem, thanks again Dogbert
    – I3i0
    Commented Jun 12, 2013 at 10:01
  • post the code here afterwards and mark it as the valid answer. Also, @Dogbert should get some kudos for helping you out... +1
    – Joum
    Commented Jun 12, 2013 at 11:44

1 Answer 1

1

here is what i did after I took Dogbert's comment in consideration:

 var eSVG, originMouse;

 svg.on("mousedown", function() {
 eSVG= this,  // svg element
 originMouse = d3.mouse(eSVG),  // mouse origing
 rect = svg.append("rect").attr("class", "zoom");
 originMouse[0] = Math.max(0, Math.min(width, originMouse[0]));
 originMouse[1] = Math.max(0, Math.min(height, originMouse[1]));

    svg.on("mousemove", function() {
        console.log(eSVG);                          **// defined **
        var m = d3.mouse(eSVG);
        console.log(originMouse);                   **// defined ** 
        m[0] = Math.max(0, Math.min(width, m[0]));
        m[1] = Math.max(0, Math.min(height, m[1]));
        rect.attr("x", Math.min(originMouse[0], m[0])-130)
           .attr("y", Math.min(originMouse[1], m[1])-80)
           .attr("width", Math.abs(m[0] - originMouse[0]))
           .attr("height", Math.abs(m[1] - originMouse[1]));
     })
  d3.event.stopPropagation();
})
2
  • i can accept my own answer in 2 days as stackoverflow site said.
    – I3i0
    Commented Jun 12, 2013 at 16:59
  • exactly, forgot that detail! sorry! :)
    – Joum
    Commented Jun 13, 2013 at 7:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.