माउस स्थिति डी 3

Question

में मैं सिर्फ निम्नलिखित कोड का उपयोग करके डी 3 का उपयोग कर माउस स्थिति प्राप्त करना चाहता था:

var x = 0; 

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

लेकिन क्या मैं हमेशा x = 0 प्राप्त !. console.log() का उपयोग करके, मैं देख सकता हूं कि x मूल्य function() के अंदर बदल रहा है लेकिन इसमें से x को इसकी आरंभिक मूल्य = 0 मिली है।

मैं x मूल्य कैसे सहेज सकता हूं और बाद में अपने आवेदन में इसका उपयोग कर सकता हूं?

Answer 1

आपको एक सरणी का उपयोग करना होगा। यही कारण है कि x और तरह y स्टोर करेगा:

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

आप क्लिक करें और खींचें समारोह इस उदाहरण के माध्यम से समझ सकते हैं बहुत well.Hope यह मदद करता होगा ..

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

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

Answer 3

मैं आपको संदेह कुछ ऐसा करने की कोशिश कर रहे हैं:

var x = 0; 

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

console.log(x); 

जब तक आपके पास सुपर फास्ट हैं, तो यह हमेशा कंसोल पर "0" लिखता है क्योंकि जब आप माउस तक पहुंचते हैं तो पूरी स्क्रिप्ट निष्पादित होती है। अपने स्निपेट को सीधे कंसोल में डालने का प्रयास करें, माउस को चारों ओर ले जाएं और फिर कंसोल में "x" टाइप करें। आपको नवीनतम एक्स मान देखना चाहिए।

मुझे आशा है कि इससे मदद मिलेगी, लेकिन मैंने इस सवाल को गलत समझा होगा।

Answer 4

वी 3:

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

वी 4:

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