score:8

Accepted answer

I would recommend manually drawing the arcs with SVG's path.

First, here is a working example with the additions: https://jsfiddle.net/mztafs0w/


Explanation:

SVG Path has commands such as M for Move, A for Arc, L for draw Line to:

  • Capital letters are absolute pixel movements
  • Lowercase letters are relative pixel movements

To make a filled pie slice using SVG path, you must perform these actions:

How to draw an arc image source


Let's say your radius is 40 and you want a slice for the top-right quadrant. The entire command for this would be:

  • Move X(0) Y(-40) -- move to top
  • Arc X-Radius(40) Y-Radius(40) XRot(0) >180deg?(0) Sweep(1) X(40) Y(0) -- arc to right
  • Line X(0) Y(0) -- return to center

Compressed into svg path format, this appears as:

M 0 -40 A 40 40 0 0 1 40 0 L 0 0 (minimally, M0,-40A40,40,0,0,1,40,0L0,0)

Performing this 4 times to get all 4 quadrants is simple enough, and replacing radius with ${r} allows the size to be easily adjusted.

The final code added to your JS fiddle:

var slices=[];
  slices[0] = node.append("path")
  .attr("d", function(d) {
    let r = d.type == "family" ? family_radius + 5 : 40;
    return `M 0 -${r} A ${r} ${r} 0 0 1 ${r} 0 L 0 0`; } )
  .attr("fill", "coral");
slices[1] = node.append("path")
    .attr("d", function(d) {
    let r = d.type == "family" ? family_radius + 5 : 40;
    return `M ${r} 0 A ${r} ${r} 0 0 1 0 ${r} L 0 0`; } )
  .attr("fill", "royalblue");
slices[2] = node.append("path")
  .attr("d", function(d) {
    let r = d.type == "family" ? family_radius + 5 : 40;
    return `M 0 ${r} A ${r} ${r} 0 0 1 -${r} 0 L 0 0`; } )
  .attr("fill", "olivedrab");
slices[3] = node.append("path")
  .attr("d", function(d) {
    let r = d.type == "family" ? family_radius + 5 : 40;
    return `M -${r} 0 A ${r} ${r} 0 0 1 0 -${r} L 0 0`; } )
  .attr("fill", "goldenrod");

I recommend you remove the non-working describeArc section and make the code more DRY. You may perform more calculations to have the circle slices break at places other than 0/90/180/270. Let me know if you need help with any of those, or you may check the image source for more tips.

I also changed the family_radius to family_radius + 5 so you can see the arcs being drawn underneath the white fill of those smaller circles. If this is not desirable you may either remove the white fill on these circles (line 165 if(d.type == "family"){return "white"}) or simply not draw these slices at all for those circles.


Related Query

More Query from same tag