鼠标悬停在 d3 中的路径上

Question

我有一个带多边形的雷达图。现在我希望它们在鼠标悬停时填充颜色，但仅当鼠标在路径上时。当鼠标在多边形内时，它应该没有填充。

到目前为止我试过

svg.selectAll('.polygon')
    .data(scaledData)
    .enter()
    .append('svg:path')
    .attr('d', radialLine)
    .attr('stroke', function(d, i) {return colors(i);})
    .attr('stroke-width', '3')
    .attr('fill', 'none')
    .on("mouseover", function(d) {
      d3.select(this).style("fill", d3.select(this).attr('stroke')).attr('opacity', 0.3);
    })                  
    .on("mouseout", function(d) {
      d3.select(this).style("fill", "none").attr('opacity', 1);
    });

当我在整个多边形上时填充。另外我想让笔画保持不变，而不是改变它的不透明度。

任何帮助表示赞赏

Answer 1

设置属性pointer-events="visibleStroke"以触​​发笔触上的事件，并使用fill-opacity代替opacity。

svg.selectAll('.polygon')
    .data(scaledData)
    .enter()
    .append('svg:path')
    .attr('d', radialLine)
    .attr('stroke', function(d, i) {return colors(i);})
    .attr('stroke-width', '3')
    .attr('fill', 'none')
    .attr('pointer-events', 'visibleStroke')
    .on("mouseover", function(d) {
      d3.select(this).style("fill", d3.select(this).attr('stroke'))
          .attr('fill-opacity', 0.3);
    })                  
    .on("mouseout", function(d) {
      d3.select(this).style("fill", "none")
          .attr('fill-opacity', 1);
    });