How do you translate HTML elements along with SVG elements when zooming and panning with D3

user_1769217 0
Viewed 96

I am using D3 to draw a bunch of elements on a SVG canvas, and also a tooltip in html. Then I'm using zoom to allow panning/zooming on the canvas. I want the tooltips to follow the position of the circles. I can't seem to figure out how to calculate it.

The relevant code

const svg = select('svg');

const width = +svg.attr('width');
const height = +svg.attr('height');

// Define the div for the tooltip
const tooltip = select('body')
  .append('div')
  .attr('class', 'tooltip')
  .style('opacity', 0);

const g = svg.append('g')
  .attr('width', width)
  .attr('height', height);


const zoomHandler = zoom()
  .scaleExtent([1 / 10, 100])
  .on('zoom', () => {
    g.attr('transform', event.transform);
    const { x, y, k } = event.transform;
    tooltip.attr('data-offset-x', x);
    tooltip.attr('data-offset-y', y);
    tooltip.attr('data-offset-k', k);
  });

zoomHandler(svg);

let overTooltip = false;

const moveTooltip = (d) => {
  if (!overTooltip) return;
  tooltip.transition()
    .duration(100)
    .style('opacity', 0.9);

  const x = parseInt(tooltip.attr('data-offset-x') || 0, 10);
  const y = parseInt(tooltip.attr('data-offset-y') || 0, 10);
  const k = parseInt(tooltip.attr('data-offset-k') || 0, 10);
  tooltip.html(d.id)
    .style('left', `${(d.x / k + x)}px`)
    .style('top', `${(d.y / k + y - radius(d) - 5)}px`);
};

const node = g.append('g')
  .selectAll('circle')
  .data(nodes)
  .enter()
  .append('circle')
  .attr('r', radius)
  .attr('fill', d => (colors[d.type]))
  .on('mouseover', (d) => {
    overTooltip = true;
    moveTooltip(d);
  })
  .on('mousemove', moveTooltip)
  .on('mouseout', () => {
    overTooltip = false;
    tooltip.transition()
      .duration(100)
      .style('opacity', 0);
  })
d3.js svg
1 Answers

Figured it out! Using getBoundingClientRect() on this gets the absolute position of the SVG element

function onMouseOverCircle(d) {
  const {
    x, y, width,
  } = this.getBoundingClientRect();

  tooltip.transition()
    .duration(100)
    .style('opacity', 0.9);

  tooltip.html(d.id)
    .style('left', `${x + width / 2}px`)
    .style('top', `${y - 10}px`);
}

const node = g.append('g')
  .attr('stroke', '#fff')
  .attr('stroke-width', 1.5)
  .selectAll('circle')
  .data(nodes)
  .enter()
  .append('circle')
  .attr('r', radius)
  .attr('fill', d => (colors[d.type]))
  .on('mouseover', onMouseOverCircle)
  .on('mouseout', () => {
    tooltip.transition()
      .duration(100)
      .style('opacity', 0);
  })
user_17692170
Related