Родительское преобразование css, влияющее на точки d3.mouse

Question

Я использую третью библиотеку, которая добавляет 'transform: translate3d (200,0,0);' к родительскому элементу. Таким образом, элементы внутри svg имеют тенденцию двигаться вправо. Для перетаскивания & событий падения достаточно установить начало координат, но у меня возникают проблемы, чтобы исправить d3.mouse (это).

Я создал jsfiddle этого примера: http://bl.ocks.org/hlucasfranca/f133da4493553963e710

jsFiddle: https://jsfiddle.net/rahpuser/5jp6123u/

Таким образом, при нажатии кнопки без применения преобразования к родителю, все нормально, но когда родитель имеет преобразование, d3 .mouse возвращает неправильный номер

var coords = d3.mouse(this); 
coords[0] === 100; //true without transform.. 
coords[0] === 300; // true when the transform to the parent is applied. 
// the values are not precise but you can verify the behavior in the jsfiddle 

1. Почему d3.mouse (это) не в состоянии получить правильное значение?

Мое понимание заключается в том, что d3.mouse должен получить соглашения на основе контейнера (svg).

2. Что мне делать, чтобы исправить поведение, поддерживающее родительский объект новым преобразованием?

Спасибо.

UPDATE:

Не работает в Firefox 46 для убунту

Работа хорошо в хроме и опере

Answer 1

Как вы обнаружили, это известная ошибка FireFox. Даже если вы исправили FireFox, потребуется некоторое время для распространения, и он никогда не будет исправлен в обратном порядке. Поэтому вам все равно нужно обходное решение.

Одна вещь, которую вы можете сделать - до тех пор, как верхний левый в SVG всегда является на 0,0 координате его содержащего DIV (как в случае с jsFiddle) - это заменить вызов d3.mouse(this) с:

Это даст координату мыши от родителя SVG, который является нормальным div, поэтому, очевидно, эта проблема не затронута этой ошибкой и вы получите нужное вам значение на всех платформах.

Это не относится к проблеме с корнем (например, getClientBoundingRect все равно вернет неправильные значения), но она работает по вашей конкретной проблеме.