d3.js (v4) + force layout + zoom проблема с tooltips

365
16 февраля 2017, 00:35

На построенном графике имеются самописные tooltips, которые работают достаточно плавно без каких либо трансформаций:

Пример работы без трансформаций

Когда дело доходит до трансформаций, то не понятно, как выщитывать положение для tooltips, поэтому происходит следующее:

Пример работы с трансформацией

Сама функция для высчитывания позиции выглядит так:

function setPosition(element) {
    let tooltip = document.getElementById('relation-chart__tooltip');
    let zoomTransform = document
        .getElementById('zoom-wrapper')
        .getAttribute('transform');
    let translate = [];
    let transform = [];
    let scale = 0;
    if (zoomTransform) {
        translate = zoomTransform.split(' ');
        scale = translate[1].match(/[+-]?\d+(\.\d+)?/g)[0];
        transform = translate[0].match(/[+-]?\d+(\.\d+)?/g);
    } else {
        scale = 1;
        transform = [0, 0]
    }
    let coords = {
        x: element.getAttribute('cx') - (tooltip.offsetWidth / 2) + (parseFloat(transform[0]) / 6),
        y: element.getAttribute('cy') - tooltip.offsetHeight - 20 + (parseFloat(transform[1]) / 6)
    };
    tooltip.style.transform = `translate(${coords.x}px, ${coords.y}px) scale(${scale})`;
}

где через zoomTransform проверяется, применена ли трансформация. Сами формулы находятся соотвественно в coords объекте.

Я выложил проект на хостинг: График Бандлер использовал Webpack, в консоли по наведению на кружок выведется объект с ссылкой на саму функцию:

где coordX, coordY это координаты coords.x, coords.y, scale и transform это трансформации соответственно.

Трансформируется элемент g.zoom-wrapper:

Собственно, вопрос в том, как высчитать положение для tooltips

P.S. Попытался объяснить всё максимально доступно и понятно. Надеюсь получилось :)

READ ALSO
Какие есть удобные автотесты для javascript [требует правки]

Какие есть удобные автотесты для javascript [требует правки]

Хотелось бы к примеру запускать тест а он эмуляровал нажатия на сайте и ожидал определенный результат

324
Как правильно пользоваться FileLoader'ом?

Как правильно пользоваться FileLoader'ом?

Ребята, помогите с вопросомНеобходимо узнать полный путь до изображения в папке на компьютере, чтобы это путь записать в CSS и отобразить на странице...

293
JavaScript Инкремент

JavaScript Инкремент

Изучаю JavaScriptВ учебнике сказано:

246
JavaScript | Прототипирование, застрял немножко

JavaScript | Прототипирование, застрял немножко

Написал такую штуку: Вопросы собственно в коде

286