1 | # d3-canvas-transition
|
2 |
|
3 | [![CircleCI](https://circleci.com/gh/quantmind/d3-canvas-transition.svg?style=svg)](https://circleci.com/gh/quantmind/d3-canvas-transition)
|
4 | [![Dependency Status](https://david-dm.org/quantmind/d3-canvas-transition.svg)](https://david-dm.org/quantmind/d3-canvas-transition)
|
5 | [![devDependency Status](https://david-dm.org/quantmind/d3-canvas-transition/dev-status.svg)](https://david-dm.org/quantmind/d3-canvas-transition#info=devDependencies)
|
6 |
|
7 | **ALPHA - USE IT WITH CARE**
|
8 |
|
9 | This is a [d3 plugin](https://bost.ocks.org/mike/d3-plugin/) for drawing on
|
10 | svg and canvas using the same [d3-transition](https://github.com/d3/d3-transition) API.
|
11 |
|
12 | ## Installing
|
13 |
|
14 | If you use [NPM](https://www.npmjs.com/package/d3-canvas-transition), ``npm install d3-canvas-transition``.
|
15 | Otherwise, download the [latest release](https://github.com/quantmind/d3-canvas-transition/releases).
|
16 | You can also load directly from [giottojs.org](https://giottojs.org),
|
17 | as a [standalone library](https://giottojs.org/latest/d3-canvas-transition.js) or
|
18 | [unpkg](https://unpkg.com/d3-canvas-transition/).
|
19 | AMD, CommonJS, and vanilla environments are supported. In vanilla, a d3 global is exported.
|
20 | Try [d3-canvas-transition](https://runkit.com/npm/d3-canvas-transition) in your browser.
|
21 | ```javascript
|
22 | <script src="https://d3js.org/d3-collection.v1.min.js"></script>
|
23 | <script src="https://d3js.org/d3-color.v1.min.js"></script>
|
24 | <script src="https://d3js.org/d3-selection.v1.min.js"></script>
|
25 | <script src="https://d3js.org/d3-timer.v1.min.js"></script>
|
26 | <script src="https://giottojs.org/latest/d3-canvas-transition.min.js"></script>
|
27 | <body>
|
28 | <canvas id="hi" width="400" height="400"></canvas>
|
29 | <script>
|
30 | var canvas = d3.select('#hi').canvas();
|
31 | </script>
|
32 | ```
|
33 | For examples check [lsbardel blocks](http://bl.ocks.org/lsbardel)
|