score:1

Accepted answer

i've tried by removing the outer circle and using the square only for mouseover events. it is a completely transparent rgba(0,0,0,0) "hitbox" now. also prevented the small family circles from becoming squares with d.sex === 'f' || d.type === 'family'

the pie/square slices are enough to draw the full shape, you have done that successfully. i think you should try to apply the stroke/fill options on the small portions and leave the hover events to a transparent larger box so you don't need to apply it repetitively. (until, of course, you want these smaller sections to fire separate events)

here's your jsfiddle edited so far: https://jsfiddle.net/wa30rgb2/1/


Related Query

More Query from same tag