鼠標懸停只有在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); 
    });