D3 координаты клика относительно страницы не svg - как их перевести (ошибка Chrome)

Когда событие находится в игре, d3.event.x дает положение координаты x щелчка мыши, но относительно всего HTML-документа. Я попытался использовать jQuery $('svg'). Position(), чтобы получить фактическую позицию svg, но это возвращает вопиющие ошибочные значения.

Есть ли простой способ найти позицию svg относительно страницы, которую я пропускаю? Я использую Chrome, кстати, в случае, если проблема jQuery является непонятной ошибкой браузера.

EDIT: я проверил это в firefox и $('svg'). position() возвращает правильные координаты.?!?

Ответы

Ответ 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));
}