CODEWITHSUNDEEP
d3.jssvgmouseeventmouseover
maxze
maxze

Reputation: 43

mouseover only on path in d3

I have a radar chart with polygons. Now I want them to be filled with color on mouseover, but only when the mouse is on the path. When the mouse is inside the polygon it should have no fill.

So far I tried

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

Which fills when I'm over the whole polygon. Also I'd like to have the stroke stay the same and not change it's opacity.

Any help is appreciated

Upvotes: 2

Views: 5636

Answers (1)

ccprog
ccprog

Reputation: 21921

Set the attribute pointer-events="visibleStroke" to trigger the event over the stroke, and use fill-opacity instead of 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);
    });

Upvotes: 7

Related Questions