tooltipEventListeners = countriesSelection .on('mouseenter', ({ target }) => { tooltipSelection.style('visibility', 'visible'); d3.select(target) .transition() .duration(150) .ease(d3.easeCubic) .style('fill', '#ffba08'); }) .on('mousemove', ({ pageX, pageY, target }) => { //switch (order) { // case "all": tooltipSelection .style('top', `${pageY + 20}px`) .style('left', `${pageX - 10}px`) .style('z-index', 200) .style('padding', '10px') .html( `${ target.__data__.properties.name }
Facebook Fans: ${ target.__data__.properties.mu_2010 } `, ) .append('div') .attr('class', 'triangle'); // break; // case "mu": // tooltipSelection // .style('top', `${pageY + 20}px`) // .style('left', `${pageX - 10}px`) // .style('z-index', 200) // .style('padding', '10px') // .html( // `${ // target.__data__.properties.name // }
FB Fans: ${ // target.__data__.properties.mu_2010 // }`, // ) // .append('div') // .attr('class', 'triangle'); // break; // } /* backup tooltip.html(function() { if (d.category == "A") { return " Oh yeah ! Seen on : " + d.url; } else { return " So cool ! Check it out on : " + d.url; } })*/ d3.selectAll('.triangle').style('top', `${-Math.sqrt(20) - 3}px`); }) .on('mouseleave', (e) => { tooltipSelection.style('visibility', 'hidden'); d3.select(e.target) .transition() .duration(150) .ease(d3.easeCubic) .style('fill', (d) => d.properties.fillColor); });