On the plotted graph there are samopisny tooltips that work quite smoothly without any transformations:

Example of working without transformations

When it comes to transformations, it’s not clear how to lay out the position for the tooltips , so the following happens:

Transformation Example

The function itself for calculating the position looks like this:

 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})`; }

where through zoomTransform checked whether the transformation is applied. The formulas themselves are appropriately in the coords object.

I put the project on hosting: Schedule Bandler used Webpack, in the console on hovering the circle will display an object with a link to the function itself:

An object

where coordX, coordY are coordinates coordinatess.x coords.x, coords.y , scale and transform are transformations respectively.

The g.zoom-wrapper element is g.zoom-wrapper :

Transformation

Actually, the question is how to calculate the position for the tooltips

PS I tried to explain everything as accessible and understandable as possible. I hope it turned out :)

    1 answer 1

    Good day! I worked on d3.js a couple of years ago and used force layout. I tied a rectangular div to each element, and this hint is displayed correctly during transformations. However, she disappeared while moving.

    Example: http://kirillbq.bget.ru/main At the bottom of the page is a d3.js diagram with objects and links. You can look, and if you are interested in such a decision, I can explain in more detail.

    The coordinates were calculated as follows:

    function set_highlight (d) {

      svg.style("cursor","pointer"); if ((tooltipShow)&&(d.description!="")) { var event = window.event; var x = event.pageX; var y = event.pageY; tooltip.css("display","inline"); tooltip.offset({top:y+10, left:x+10}); tooltip.html(d.description); } }

    where tooltip = $ ("# tooltipDiv"); tooltipShow is a global variable that determines whether to display a tooltip or not.

    Somewhere on the HTML page somewhere created div c id = "tooltipDiv".

    The function with this code was called when you hover over an object.

    .on ('mouseover', function (d) {set_highlight (d);})

    • Well thank you! I will try your reception, if it works, I award a premium :) - David Arutiunian
    • Your reception worked well, though I had to abandon the transformation of the size of the tooltip itself. But thanks anyway! - David Arutiunian
    • Glad it helped! Thank you for the award. :) Maybe it’s good that the tooltip is always a standard size. Otherwise, when decreasing, it also becomes small, and the text is no longer visible. - Kirill Ch