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

を試してみました。また、ストロークを同じにして、不透明度を変更しないようにしたいと思います。

すべてのヘルプは、ストロークの上にイベントをトリガし、opacityの代わりにfill-opacityを使用する属性pointer-events="visibleStroke"を設定

Answer 1

を高く評価しています。

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