UNPKG

2.33 kBMarkdownView Raw
1<h1 align="center">
2<b>@antv/coord</b>
3</h1>
4<div align="center">
5
6Toolkit for mapping elements of sets into geometric objects. ([demo](https://observablehq.com/@pearmini/antv-coord))
7
8![examples](https://gw.alipayobjects.com/mdn/rms_026665/afts/img/A*3jseR7EZEBwAAAAAAAAAAAAAARQnAQ)
9
10[![Build Status](https://github.com/antvis/coord/workflows/build/badge.svg?branch=master)](https://github.com/antvis/coord/actions)
11[![Coverage Status](https://img.shields.io/coveralls/github/antvis/coord/master.svg)](https://coveralls.io/github/antvis/coord?branch=master)
12[![npm Version](https://img.shields.io/npm/v/@antv/coord.svg)](https://www.npmjs.com/package/@antv/coord)
13[![npm Download](https://img.shields.io/npm/dm/@antv/coord.svg)](https://www.npmjs.com/package/@antv/coord)
14[![npm License](https://img.shields.io/npm/l/@antv/coord.svg)](https://www.npmjs.com/package/@antv/coord)
15
16</div>
17
18## ✨ Features
19
20- **Powerful**: Not only does @antv/coord provide some basic affine transformations(translate, rotate, scale, etc.), it also provide some advanced coordinate system transformations(polar, helix, parallel) and cool fisheye transformations.
21- **Fixable**: It is a independent lib which means you can use it with other libs besides [G2](https://github.com/antvis/g2/), such as [D3](https://github.com/d3/d3) to create some awesome charts and animations.
22- **Fully embrace TypeScript**: All code are written in TypeScript and complete type definition files are provided.
23
24![bubbles](https://gw.alipayobjects.com/mdn/rms_026665/afts/img/A*G5jIQLRQ86QAAAAAAAAAAAAAARQnAQ)
25
26## 📦 Installation
27
28```bash
29$ npm install @antv/coord
30```
31
32## 🔨 Getting Started
33
34```ts
35import { Coordinate, Options } from '@antv/coord';
36
37const optons: Options = {
38 x: 0,
39 y: 0,
40 width: 500,
41 height: 500,
42 transformations: [['cartesian']]
43};
44
45const coord = new Coordinate(options);
46coord.transform('translate', 10, 10);
47coord.map([0.5, 0.5]); // [260, 260]
48coord.getSize(); // [500, 500]
49coord.getCenter(); // [250, 250]
50```
51
52## 📎 Links
53
54- [Online Demo](https://observablehq.com/@pearmini/antv-coord)
55- [API Reference](./docs/api/README.md)
56
57## 📮 Contribution
58
59```bash
60$ git clone git@github.com:antvis/coord.git
61
62$ cd coord
63
64$ npm i
65
66$ npm t
67```
68
69Then send a pull request after coding.
70
71## 📄 License
72
73MIT@[AntV](https://github.com/antvis).