d3 क्लिक निर्देशांक पृष्ठ के सापेक्ष हैं svg - उन्हें अनुवाद कैसे करें (क्रोम त्रुटि)

Question

जब कोई ईवेंट play में होता है, d3.event.x माउस क्लिक के एक्स समन्वय की स्थिति देता है, लेकिन पूरे के सापेक्ष एचटीएमएल दस्तावेज़ मैंने svg की वास्तविक स्थिति प्राप्त करने के लिए jQuery की $ ('svg')। स्थिति() का उपयोग करने की कोशिश की लेकिन यह वापसी पूरी तरह से कमजोर मूल्यों को लौटती है।

क्या पृष्ठ के सापेक्ष एक एसवीजी की स्थिति को ढूंढने का कोई आसान तरीका है जिसे मैं देख रहा हूं? मैं क्रोम का उपयोग कर रहा हूं, वैसे, अगर jQuery समस्या एक अस्पष्ट ब्राउज़र त्रुटि है।

संपादित करें: मैंने इसे फ़ायरफ़ॉक्स और $ ('svg') में चेक किया है। स्थिति() सही निर्देशांक देता है। ?!?

Answer 1

d3.event का उपयोग करने के बजाय, जो ब्राउज़र का मूल घटना है, कुछ कंटेनर के सापेक्ष निर्देशांक प्राप्त करने के लिए d3.mouse का उपयोग करें। उदाहरण के लिए:

var svg = d3.select("body").append("svg") 
    .attr("width", 960) 
    .attr("height", 500); 

var rect = svg.append("rect") 
    .attr("width", "100%") 
    .attr("height", "100%") 
    .on("mousemove", mousemove); 

function mousemove(d, i) { 
    console.log(d3.mouse(this)); 
}