Demo

link

Install

npm i polar-d3

Setup

import { Polar } from 'polar-d3';

const polar = new Polar();

Add, Update, Remove data

The complete data will be automatically judged for updates, additions, and deletions.

polar.itemModel.new = [
  { name: 'A', value: 10 },
  { name: 'B', value: 20 },
];

Configuration

polar.newConfig = { radialLength: 150, xTextSize: 24 }

You can also pass configuration when initializing a Polar instance.

new Polar({ svgWidth: 200, svgHeight: 200 });

Other configuration properties:

const config = {
  fieldsId: 'name',
  fieldsName: 'name',
  fieldsValue: 'orders',
  selector: '.canvas',
  svgWidth: 600,
  svgHeight: 600,
  marginTop: 100,
  marginRight: 20,
  marginBottom: 20,
  marginLeft: 100,
  radialLength: 300,
  radialStrokeWidth: 1,
  radialTextSize: 16,
  radialTextFamily: 'Arial',
  radialTextColor: 'black',
  radialTextStrokeDasharray: '5,5',
  xTextSize: 16,
  xTextFamily: 'Arial',
  xTextColor: 'black',
  arcRadius: 250,
  arcRange: [270, 330, 360],
  arcStrokeWidth: 0.5,
  arcTextSize: 16,
  arcTextFamily: 'Arial',
  arcTextColor: 'black',
  eventHandlerEvent: 'click',
  eventHandlerHandler: (d: any) => console.log(d),
  animationDuration: 750
}