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);
    });

仅在d3中的路径上进行鼠标悬停

1 个答案: