liveBook · Manning

padAngle()

As explained in D3.js in Action, Third Edition

padAngle is pie-layout metadata or configuration representing the angular padding between adjacent slices.

padAngle() represents angular padding between adjacent pie or donut slices. In an arc generator, it accepts a padding angle in radians and leaves visible space between arcs. section 4.4.2 section 4.5

Use padAngle() with these practical rules:

  • Chain it while configuring d3.arc(), alongside innerRadius(), outerRadius(), and optionally cornerRadius(). section 4.4.2
  • Pass the value in radians; 0.02 radians produces slightly more than one degree of padding. section 4.4.2
  • Keep slice angles separate from padding when manually supplying startAngle and endAngle to the arc generator. section 4.4.2
  • Expect pie-layout output to include padAngle metadata alongside each slice’s value, index, and angular bounds. section 5.1.2
const arcGenerator = d3.arc()
  .innerRadius(80)
  .outerRadius(120)
  .padAngle(0.02)
  .cornerRadius(6);

Configure an arc generator with radial dimensions, angular padding, and rounded corners before generating SVG path data. section 4.4.2

How D3.js in Action, Third Edition covers it

How deep it goes
Explains padAngle as a radian-valued accessor and identifies its pie-layout metadata, without detailing a complete pie-padding configuration.
Examples
Uses 0.02 radians in precipitation arcs and shows padAngle metadata in annotated sales data for a donut chart.
What it assumes
Assumes familiarity with arc generators and slice angles while introducing radians as the angle unit.
What you can do after
Apply it via D3’s arc generator to create visibly separated pie or donut slices.
How it connects
Connects padAngle to D3 arc generators, pie layouts, SVG paths, polar coordinates, and cornerRadius().
Cover of D3.js in Action, Third Edition
liveBookmanning.com
Read D3.js in Action, Third Edition on liveBook Get the book at manning.com

This explainer was generated by Manning's knowledge graph from the text of D3.js in Action, Third Edition. The section links point to the parts of the book it draws on.