Question

当用户将鼠标悬停在d3.js上时，如何突出显示圆圈的周长？当用户将鼠标悬停在相同的

上时，我希望加宽圆周宽度

Answer 1

您可以使用纯CSS执行此操作，无需使用D3.js.例如：

circle {
  fill: lightblue;
  stroke: grey;
  stroke-width: 0;
}

circle:hover {
  stroke-width: 2px;
}

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40"/>
</svg>

Answer 2

你在寻找这样的东西：

<!DOCTYPE html>
<html>

  <head>
    <script data-require="d3@4.0.0" 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>

使用D3.js突出显示圆的圆周

2 个答案: