Uzyskuj współrzędne kliknięcia myszą na svg przy użyciu d3

Question

Chcę uzyskać współrzędne kliknięcia myszą na prostokątnym kształcie svg. Próbuję wydrukować współrzędne kliknięcia myszką na konsolę.

Mogę użyć pageX i pageY, aby uzyskać współrzędne, ale dotyczy to całej strony. Potrzebuję tylko współrzędnych wewnątrz svg.

Używam d3.v3.min.js

Tak próbowałem:

$(document).mousedown(function() { 
    console.log(d3.mouse(this)); 
}); 

pojawia się błąd:

Uncaught TypeError: Cannot read property 'sourceEvent' of null

ja też próbowałem:

$(document).mousedown(function() { 
    console.log(d3.mouse(document.getElementById("svg_id"))); 
}); 

otrzymuję ten sam błąd.

Kiedy próbuję z d3.svg.mouse(this), otrzymuję błąd:

Uncaught TypeError: undefined is not a function

Jak mogę uzyskać współrzędne kliknięcia w SVG i dlaczego są te d3.mouse() funkcje nie działa?

Answer 1

Problem z kodem polega na tym, że zamiast obsługi zdarzeń D3 używasz obsługi zdarzeń jQuery. Chcesz coś jak następuje:

var svg = d3.select("svg"); 
svg.on("click", function() { 
    console.log(d3.mouse(svg.node)); 
})