web-dev-qa-db-fra.com

Les coordonnées de clic d3 sont relatives à la page et non à svg - comment les traduire (erreur Chrome)

Lorsqu'un événement est en cours de lecture, d3.event.x donne la position de la coordonnée x du clic de souris, mais par rapport à l'ensemble du document HTML. J'ai essayé d'utiliser $ ('svg'). Position () de jQuery pour obtenir la position réelle du svg, mais cela renvoie des valeurs manifestement fallacieuses.

Existe-t-il un moyen simple de trouver la position d'un svg par rapport à la page que je surplombe? J'utilise Chrome, d'ailleurs, au cas où le problème jQuery serait une erreur de navigateur obscure.

EDIT: J'ai vérifié cela dans Firefox et $ ('svg'). Position () renvoie les coordonnées correctes. ?!?

javascriptgoogle-chromesvgclickd3.js
30
ballaw

Au lieu d'utiliser d3.event , qui est l'événement natif du navigateur, utilisez d3.mouse pour obtenir les coordonnées relatives à un conteneur. Par exemple:

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