変数のスコープに問題があります。以下のコードには、いくつかの値を割り当てたい 2 つの変数があり、コードの後半でこれらの値を使用します。変数は、eSVG、originMouse です。mousedown イベント関数を使用しているときにそれらの値を割り当ててから、これらの値を mousemove イベント関数で使用しようとしていますが、常に未定義の値が取得されます。ここで何が起こっているのか教えてください。
みんなありがとう
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]));
})