Search code examples
javascriptcssd3.jstooltip

Highlight Circumference of a circle using D3.js

How to highlight the circumference of a circle in d3.js when the user hovers overs it? I wish to bolden the width of the circumference of a circle when the user hovers over the same

As shown in the example here

Solution

  • Are you looking for something like this:

    <!DOCTYPE html>
<html>

  <head>
    <script data-require="[email protected]" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
  </head>

  <body>
    <script>
      
      var svg = d3.select('body')
        .append('svg')
        .attr('width', 500)
        .attr('height', 500);
        
      var circle = svg.append('circle')
        .attr('transform', 'translate(250,250)')
        .attr('r', 200)
        .style('fill', 'steelblue')
        .style('stroke-width', '15px')
        .style('stroke', 'none')
        .on('mouseover', function(){
          d3.select(this)
            .style('stroke', 'orange');
        })
        .on('mouseover', function(){
          circle
            .style('stroke', 'orange');
        })
        .on('mouseout', function(){
          circle
            .style('stroke', 'none');
        })
      
    </script>
  </body>

</html>