Как получить корректное значение курсора?

Question

[doox911]

Вот так я получаю корректные данные позиции курсора (не менял масштаб):

self.x = Math.round(x_scale.invert(d3.mouse(this)[0]-50));
self.y = Math.round(y_scale.invert(d3.mouse(this)[1]-50));

Как получить корректные значения после увеличения/уменьшения масштаба изображения?

Comments

[Роман]

Я если честно, совершенно не в теме (никогда не имел дело с d3), но мне почемуто кажется, что x_scale и y_scale должны автоматически учитывать масштаб.
И вот еще вопросик, что по вашему мнению будет "корректными координатами", координаты в условной системе координат на листе/графике с учетом масштаба или координаты на канвасе в пикселях?

PS: делал как то такие штуки (раз, два), без всяких библиотек на чистом канвасе. Так вот, по опыту скажу, что с такими штуками удобнее работать в условной системе координат листа, нежели постоянно пересчитывать координаты между координатами листа и координатами канваса с учетом смещерия листа по осям и его масштаба.

[doox911]

Роман, под корректными координатами, я понимаю то, что коодинаты курсора равны значениям осям.
Т.е. при визуальном положении курсора (х:650; y:640) результат совсем не тот.

[Роман]

doox911, ок, то есть как я и предполагал - корректные координаты это координаты на листе (не канвасе) с учетом масштаба и смещений.
Теперь попробуем разобраться, поэтому ответьте еще на ряд вопросов:)
1. d3.mouse(this)[0] и d3.mouse(this)[1] - я правильно понимаю что это координаты курсора к пикселях относительно канваса?
2. d3.mouse(this)[0]-50 - зачем тут -50?
3. x_scale и y_scale это что? вспомогательные объекты d3? скиньте их описание.
4. x(y)_scale.invert - что делает invert?

[doox911]

1. Это x и y.
2. Это padding осей.
3. Это объекты:

const x_scale = d3.scaleLinear().domain([0, 4000]).range([0, this.svg_DS_width]);
const y_scale = d3.scaleLinear().domain([0, 4000]).range([this.svg_DS_height, 0]);

4. тут

[Роман]

doox911, про 1, x y в какой системе координат, листа или канваса?

А еще лучше дайте рабочий вариант графика в jsfiddle или codepen и минут через 10 дам вам ответ на ваш вопрос)

[doox911]

codepen

[Роман]

doox911, Ваш пример вроде полностью рабочий при любом масштабе. Что я упускаю?

[doox911]

Мне нужны координаты на курсоре) Навёл я курсор на область, и вижу координаты.

[doox911]

Нашел, но пока не могу к себе применить.

[Роман]

doox911, пример что вы дали Ваш или взят откуда то?
ЗЫ: уж слишком много в нем намудрили с масштабированием)

[doox911]

Взят. Мой только codepen

[Роман]

doox911, в примере на мой взгляд сильно намутили, ковырять его не буду, уж извините. Могу дать пару рекомендаций по реализации (при этом скорее всего большая часть рекомендаций уже реализована в d3)

1. Всю работу с элементами производите в координатах самого листа (они не меняются в зависимости от масштабирования и смещения)
2. Преобразование координат канваса в координаты листа в данном случае можно проводить по формуле
Хлиста = (Хканваса - Xсмещение)*масштаб.
Хканваса = смещение + Хлиста/масштаб
где:
Хлиста - координаты относительно точки листа с нулевыми координатами
Хканваса - координаты в пикселях относительно нижнего левого угла канваса (координату y необходимо инвертировать y = Hканваса - y)
Hканваса - высота канваса в пикселях
Wканваса - ширина канваса в пикселях
Xсмещение - смещение по оси Х точки листа с координатами [0:0] в пикселях относительно нижнего левого угла канваса
масштаб - масштаб ))) (считается по формуле Hвидимой_области/Hканваса или Wвидимой_области/Wканваса
видимая область - та область листа что видна в канвасе
Hвидимой_области - высота видимой области листа в условных единицах измерения самого листа
Wвидимой_области - ширина видимой области листа в условных единицах измерения самого листа
Для Y пересчет производится по аналогии с X
3. для удобства все функции рисования должны принимать в качестве координат - координаты листа (не канваса). Это автоматом реализует пункт 1. При этом при отображении видимой области на канвас, данные координаты пересчитываются в координаты канваса по второй формуле из п.2