Chuột vị trí trong D3

Question

Tôi chỉ muốn có được vị trí chuột sử dụng D3 bằng cách sử dụng đoạn mã sau:

var x = 0; 

svg.on('mousemove', function() { 
    x = d3.mouse(this)[0];   
}); 

nhưng những gì tôi luôn luôn có được x = 0 !. Bằng cách sử dụng console.log(), tôi có thể thấy rằng giá trị x đang thay đổi ngay bên trong số function() nhưng trong số đó x có giá trị khởi tạo = 0.

Làm cách nào để lưu giá trị x và sử dụng sau này trong ứng dụng của tôi?

Answer 1

Bạn phải sử dụng một mảng. Điều đó sẽ lưu trữ x và y như:

var coordinates = [0, 0]; 
coordinates = d3.mouse(this); 
var x = coordinates[0]; 
var y = coordinates[1]; 

// D3 v4 
var x = d3.event.pageX - document.getElementById(<id-of-your-svg>).getBoundingClientRect().x + 10 
var y = d3.event.pageY - document.getElementById(<id-of-your-svg>).getBoundingClientRect().y + 10 

Answer 2

Bạn có thể hiểu được nhấp chuột và chức năng kéo qua ví dụ này rất well.Hope nó sẽ giúp ..

var point = d3.mouse(this) 
    , p = {x: point[0], y: point[1] }; 

http://jsfiddle.net/mdml/da37B/

Answer 3

tôi nghi ngờ bạn có thể đang thử một số nội dung như:

var x = 0; 

svg.on('mousemove', function() { 
    x = d3.mouse(this)[0];   
}); 

console.log(x); 

Trừ khi bạn có bàn tay siêu nhanh, điều này sẽ luôn ghi "0" vào bàn điều khiển vì toàn bộ tập lệnh thực hiện trong khi bạn tiếp cận chuột. Thử đặt đoạn mã của bạn trực tiếp vào bảng điều khiển, di chuyển chuột xung quanh rồi nhập "x" vào bảng điều khiển. Bạn sẽ thấy giá trị x mới nhất.

Tôi hy vọng điều này sẽ hữu ích, nhưng tôi có thể đã hiểu sai câu hỏi.

Answer 4

V3:

var svg = d3.select('body').append('svg') 
    .attr('width', width) 
    .attr('height', height) 
    .on('mousemove', function() { 
     console.log(d3.mouse(this)) // log the mouse x,y position 
    }); 

V4:

var svg = d3.select('body').append('svg') 
    .attr('width', width) 
    .attr('height', height) 
    .on('mousemove', function() { 
     console.log(d3.event.clientX, d3.event.clientY) // log the mouse x,y position 
    });