sjaikumar sjaikumar - 1 year ago 92
CSS Question

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

Answer Source

Are you looking for something like this:

<!DOCTYPE html>

    <script data-require="d3@4.0.0" data-semver="4.0.0" src=""></script>

      var svg ='body')
        .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(){

            .style('stroke', 'orange');
        .on('mouseover', function(){
            .style('stroke', 'orange');
        .on('mouseout', function(){
            .style('stroke', 'none');


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download