Skip to content
A radial implementation of the D3 axis component
JavaScript HTML
Branch: master
Clone or download
Latest commit 076a99c Jun 13, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example Add arc axis example Feb 4, 2019
src Add spiral mode Feb 4, 2019
LICENSE Create LICENSE Apr 20, 2017
README.md Add badges Jun 13, 2019
package.json 1.6.2 Jun 13, 2019
rollup.config.js
yarn.lock Bump deps Jun 13, 2019

README.md

d3-radial-axis

NPM package Build Size Dependencies

A radial implementation of the D3 axis component.

To use for instance in a clock or a gauge meter.

Quick start

import { d3AxisRadialInner, d3AxisRadialOuter } from 'd3-radial-axis';

or

var d3.radialAxis = require('d3-radial-axis');

or even

<script src="/path/to/dist/d3-radial-axis.js"></script>

then

var myAngleScale = d3.scaleLinear()
    .domain([-10, 10])
    .range([-Math.PI, Math.PI]);
var myRadius = 100;
var myRadialAxis = d3.axisRadialInner(myAngleScale, myRadius);

d3.select(<myDOMElement>).call(myRadialAxis);

API reference

Same features as the regular D3 axis.

d3.axisRadialOuter()
    .ticks()
    .tickArguments()
    .tickValues()
    .tickFormat()
    .tickSize()
    .tickSizeInner()
    .tickSizeOuter()
    .tickPadding()

Includes additional properties to configure the radial axis, the angleScale, and the axis radius.

Also supports the representation of a spiral axis when setting a pair of startRadius and endRadius.

d3.axisRadialOuter()
    .angleScale()
    .radius()
    .startRadius()
    .endRadius()
You can’t perform that action at this time.