Convertir les coordonnées SVG en coordonnées de page dans D3.js

Question

Je suis en train d'essayer de montrer une info-bulle animée, en changeant sa position toutes les 1 seconde, pour plusieurs graphiques.

var tooltip = d3.select("body")
        .append("div")
        .attr("id", "tooltip")
        .attr("class", "tooltip");

Comme il s'agit d'une div, la fonction translate ne fonctionnera pas avec cela. Donc, j'essaie de traduire de cette manière, avec des coordonnées SVG.

tooltip.html("Tooltip")
            .style("left", x(currentTime) + "px")
            .style("top", height + "px");

Mais cela prend cette valeur comme coordonnée de la page.

Comment convertir les coordonnées SVG en coordonnées de la page? Ou existe-t-il une autre manière de créer une info-bulle en tant qu'élément SVG?

Answer 1

En supposant que votre tooltip div soit positionné absolument, vos coordonnées "page" sont simplement la position de l'élément svg plus la position de l'élément dans l'élément svg.

Voici un exemple rapide (passez la souris sur les cercles):

      Ceci est mon tooltip

      var json = [
        {x: Math.random() * 300, y: Math.random() * 300},
        {x: Math.random() * 300, y: Math.random() * 300},
        {x: Math.random() * 300, y: Math.random() * 300}
      ];

      var svg = d3.select('svg');

      svg
        .selectAll('circle')
        .data(json)
        .enter()
        .append('circle')
        .attr('cx', function(d){ return d.x })
        .attr('cy', function(d){ return d.y })
        .attr('r', 30)
        .style('fill', 'red')
        .on('mouseover', function(d){
          var svgPos = svg.node().getBoundingClientRect();
          d3.select('#tooltip')
            .style('left', svgPos.left + d.x + 'px')
            .style('top', svgPos.top + d.y + 'px');
        })