variables scope in javascript D3

Question

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]));
  })

it is a good question, i think thats the problem.. im gona give it a try thanks Dogbert — I3i0
– I3i0, Commented Jun 12, 2013 at 9:47
post the code here afterwards and mark it as the valid answer. Also, @Dogbert should get some kudos for helping you out... +1 — Joum
– Joum, Commented Jun 12, 2013 at 11:44

I3i0 · Accepted Answer · 2013-06-12 12:51:54Z

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();
})

answered Jun 12, 2013 at 12:51

I3i0

1,1912 gold badges12 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

I3i0 Over a year ago

i can accept my own answer in 2 days as stackoverflow site said.

Joum Over a year ago

exactly, forgot that detail! sorry! :)

Collectives™ on Stack Overflow

variables scope in javascript D3

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related