liveBook · Manning

innerRadius()

As explained in D3.js in Action, Third Edition

innerRadius() is a D3 arc-generator accessor that specifies or retrieves the inner radius of an arc.

innerRadius() sets or retrieves the inner radius of a D3 arc generator. Chained to d3.arc(), it defines the arc’s inner boundary in pixels; combining it with outerRadius() controls the ring’s thickness. section 4.4.2

Create a ring-shaped arc

Set innerRadius(80) and outerRadius(120) to create an annular arc. Setting the inner radius to 0 produces a pie-chart shape instead. In a precipitation chart, pass startAngle and endAngle when generating each SVG path. section 4.4.2

const arcGenerator = d3.arc()
  .innerRadius(80)
  .outerRadius(120);

Use the chained generator declaration to set the inner and outer radii before supplying each arc’s angles. section 4.4.2

Related arc-generator choices:

  • Add spacing with padAngle(), or soften corners with cornerRadius(). section 4.4.2
  • Express arc angles in radians and provide them through startAngle and endAngle when generating paths. section 4.5

How D3.js in Action, Third Edition covers it

How deep it goes
Explains radius effects and chaining, while leaving angle values to supplied arc-generation data.
Examples
Uses an 80px inner radius, a 120px outer radius, and precipitation-versus-no-precipitation arcs.
What it assumes
Builds on familiarity with D3 generators and SVG paths while teaching radius configuration through a concrete arc.
What you can do after
Apply it via D3’s arc generator to build ring-shaped SVG arcs and pie-chart forms.
How it connects
Connects inner radius with d3.arc(), outerRadius(), startAngle(), endAngle(), padAngle(), cornerRadius(), SVG paths, and polar coordinates.
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

Related concepts

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.