What is @antv/coord?
@antv/coord is a coordinate system library that provides various coordinate transformations and manipulations. It is part of the AntV ecosystem, which is a suite of data visualization tools. This package allows developers to handle different types of coordinate systems, such as Cartesian, Polar, and Helix, and perform transformations like scaling, rotating, and translating.
What are @antv/coord's main functionalities?
Cartesian Coordinate System
This feature allows you to create and manipulate Cartesian coordinate systems. The code sample demonstrates how to create a Cartesian coordinate system and convert a point within it.
const { Cartesian } = require('@antv/coord');
const cartesian = new Cartesian({ start: [0, 0], end: [1, 1] });
console.log(cartesian.convert([0.5, 0.5]));
Polar Coordinate System
This feature allows you to create and manipulate Polar coordinate systems. The code sample demonstrates how to create a Polar coordinate system and convert a point within it.
const { Polar } = require('@antv/coord');
const polar = new Polar({ start: [0, 0], end: [1, 1] });
console.log(polar.convert([Math.PI / 4, 0.5]));
Helix Coordinate System
This feature allows you to create and manipulate Helix coordinate systems. The code sample demonstrates how to create a Helix coordinate system and convert a point within it.
const { Helix } = require('@antv/coord');
const helix = new Helix({ start: [0, 0], end: [1, 1] });
console.log(helix.convert([Math.PI / 4, 0.5]));
Transformations
This feature allows you to perform various transformations like scaling and rotating on coordinate systems. The code sample demonstrates how to scale and rotate a Cartesian coordinate system and then convert a point within it.
const { Cartesian } = require('@antv/coord');
const cartesian = new Cartesian({ start: [0, 0], end: [1, 1] });
cartesian.scale(2, 2);
cartesian.rotate(Math.PI / 4);
console.log(cartesian.convert([0.5, 0.5]));
Other packages similar to @antv/coord
d3-geo
d3-geo is a module of D3.js that provides geographic projections and transformations. It is widely used for creating maps and handling geographic data. Compared to @antv/coord, d3-geo is more specialized in geographic coordinate systems and projections.
proj4
proj4 is a library for performing cartographic transformations. It supports a wide range of coordinate reference systems and is commonly used in GIS applications. While @antv/coord focuses on general coordinate systems, proj4 is more specialized in cartographic transformations.
gl-matrix
gl-matrix is a high-performance matrix and vector library for WebGL. It provides functions for matrix and vector operations, which can be used for coordinate transformations. Compared to @antv/coord, gl-matrix is more low-level and general-purpose, suitable for 3D graphics applications.
@antv/coord
✨ Features
- 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.
- Fixable: It is a independent lib which means you can use it with other libs besides G2, such as D3 to create some awesome charts and animations.
- Fully embrace TypeScript: All code are written in TypeScript and complete type definition files are provided.
![bubbles](https://gw.alipayobjects.com/mdn/rms_026665/afts/img/A*G5jIQLRQ86QAAAAAAAAAAAAAARQnAQ)
📦 Installation
$ npm install @antv/coord
🔨 Getting Started
import { Coordinate, Options } from '@antv/coord';
const optons: Options = {
x: 0,
y: 0,
width: 500,
height: 500,
transformations: [['cartesian']]
};
const coord = new Coordinate(options);
coord.transform('translate', 10, 10);
coord.map([0.5, 0.5]);
coord.getSize();
coord.getCenter();
📎 Links
📮 Contribution
$ git clone git@github.com:antvis/coord.git
$ cd coord
$ npm i
$ npm t
Then send a pull request after coding.
📄 License
MIT@AntV.