Plot.pie

Author: Fil

src/index.js

@@ -10,6 +10,7 @@ export {Dot, dot, dotX, dotY} from "./marks/dot.js";
 export {group, groupX, groupY} from "./marks/group.js";
 export {Line, line, lineX, lineY} from "./marks/line.js";
 export {Link, link} from "./marks/link.js";
+export {pie} from "./marks/pie.js";
 export {Rect, rect, rectX, rectY} from "./marks/rect.js";
 export {RuleX, RuleY, ruleX, ruleY} from "./marks/rule.js";
 export {Text, text, textX, textY} from "./marks/text.js";

src/marks/arc.js

@@ -17,6 +17,7 @@ export class Arc extends Mark {
       y = constant(0),
       innerRadius,
       outerRadius,
+      padAngle,
       z,
       title,
       fill,
@@ -29,6 +30,7 @@ export class Arc extends Mark {
     const [vstroke, cstroke] = maybeColor(stroke, cfill === "none" ? "currentColor" : cfill === "currentColor" ? "white" : "none");
     const [vsa, csa] = maybeNumber(startAngle, 0);
     const [vea, cea] = maybeNumber(endAngle, 2 * Math.PI);
+    const [vpa, cpa] = maybeNumber(padAngle, 0);
     const [vx, cx] = maybeNumber(x, 0);
     const [vy, cy] = maybeNumber(y, 0);
     const [vri, cri] = maybeNumber(innerRadius, 0);
@@ -43,6 +45,7 @@ export class Arc extends Mark {
         {name: "endAngle", value: vea, optional: true},
         {name: "innerRadius", value: vri, optional: true},
         {name: "outerRadius", value: vro, optional: true},
+        {name: "padAngle", value: vpa, optional: true},
         {name: "z", value: z, optional: true},
         {name: "title", value: title, optional: true},
         {name: "fill", value: vfill, scale: "color", optional: true},
@@ -57,11 +60,12 @@ export class Arc extends Mark {
     this.ea = cea;
     this.ri = cri;
     this.ro = cro;
+    this.pa = cpa;
   }
   render(
     I,
     {x, y, color},
-    {startAngle: SA, endAngle: EA, innerRadius: RI, outerRadius: RO, x: X, y: Y, z: Z, title: L, fill: F, stroke: S},
+    {startAngle: SA, endAngle: EA, innerRadius: RI, outerRadius: RO, padAngle: PA, x: X, y: Y, z: Z, title: L, fill: F, stroke: S},
     {marginTop, marginRight, marginBottom, marginLeft, width, height}
   ) {
     const index = filter(I, SA, EA, F, S);
@@ -73,7 +77,8 @@ export class Arc extends Mark {
       .startAngle(SA ? (i => SA[i]) : this.sa)
       .endAngle(EA ? (i => EA[i]) : this.ea)
       .innerRadius(RI ? (i => r0 * RI[i]) : r0 * this.ri)
-      .outerRadius(RO ? (i => r0 * RO[i]) : r0 * this.ro);
+      .outerRadius(RO ? (i => r0 * RO[i]) : r0 * this.ro)
+      .padAngle(PA ? (i => PA[i]) : this.pa);
 
     return create("svg:g")
         .call(applyIndirectStyles, this)

src/marks/pie.js

@@ -0,0 +1,29 @@
+import {arc} from "./arc.js";
+import {pie as transformPie} from "../transforms/pie.js";
+
+export function pie(data, {
+  value,
+  sort,
+  sortValues,
+  startAngle,
+  endAngle,
+  padAngle,
+  ...options
+} = {}) {
+  const transform = transformPie();
+  if (value !== undefined) transform.value(value);
+  if (sort !== undefined) transform.sort(sort);
+  if (sortValues !== undefined) transform.sortValues(sortValues);
+  if (startAngle !== undefined) transform.startAngle(startAngle);
+  if (endAngle !== undefined) transform.endAngle(endAngle);
+  if (padAngle !== undefined) transform.padAngle(padAngle);
+  
+  return arc(
+    data,
+    {
+      ...options,
+      padAngle,
+      transform
+    }
+  );
+}

src/transforms/pie.js

@@ -0,0 +1,3 @@
+import {pie as shapePie} from "d3-shape";
+
+export const pie = shapePie;