How To Determine A Svg Shape Based Off Of Data Using D3.js

This is related to an earlier question that I asked earlier: How to add filled sections to SVG circles using d3.js This time, I want to create a shape depending on if the person i

Solution 1:

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/