UNPKG

1.8 kBMarkdownView Raw
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
9This is a [d3 plugin](https://bost.ocks.org/mike/d3-plugin/) for drawing on
10svg and canvas using the same [d3-transition](https://github.com/d3/d3-transition) API.
11
12## Installing
13
14If you use [NPM](https://www.npmjs.com/package/d3-canvas-transition), ``npm install d3-canvas-transition``.
15Otherwise, download the [latest release](https://github.com/quantmind/d3-canvas-transition/releases).
16You can also load directly from [giottojs.org](https://giottojs.org),
17as a [standalone library](https://giottojs.org/latest/d3-canvas-transition.js) or
18[unpkg](https://unpkg.com/d3-canvas-transition/).
19AMD, CommonJS, and vanilla environments are supported. In vanilla, a d3 global is exported.
20Try [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>
30var canvas = d3.select('#hi').canvas();
31</script>
32```
33For examples check [lsbardel blocks](http://bl.ocks.org/lsbardel)