https://github.com/brodanoel/d3-to-image
D3 to Image
https://github.com/brodanoel/d3-to-image
angular angularjs chartjs d3 export image nvd3
Last synced: about 2 months ago
JSON representation
D3 to Image
- Host: GitHub
- URL: https://github.com/brodanoel/d3-to-image
- Owner: BrodaNoel
- License: mit
- Created: 2017-07-08T00:37:21.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-07-13T04:00:43.000Z (almost 9 years ago)
- Last Synced: 2025-02-17T04:29:50.919Z (over 1 year ago)
- Topics: angular, angularjs, chartjs, d3, export, image, nvd3
- Language: JavaScript
- Size: 13.7 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# D3-TO-IMAGE
This library is exclusive dedicated to D3 implemented in AngularJS. So, it will be useful to `D3` manually added over AngularJS, `NVD3` and `angularjs-nvd3`
If you want more information about how to implement your own svg-image-exporter-converter-whatever, please chck this library: https://github.com/BrodaNoel/svg-2-image/blob/master/README.md
## How to implement it in AngularJS
Here you have some help to implement it in AngularJS.
* In `bower.json`, add: `"d3-to-image": "^1.0.0",`.
* In your `index.html` add ``.
* Add ngD3ToImage as dependency in your App, doing:
```js
angular
.module('yourAwesomeApp', [
'ngRoute',
// ...
'ngD3ToImage' // <<< Add this!
])
```
* Then, for example, add a button that will call a `exportPNG` function to "run the export process", doing:
```html
Export SVG to PNG
```
* Then, define your callback function that will be called when the image finished to be created:
```js
$scope.d3ToImageCallback = function(imageFormats) {
// Let's use FileSave library to download the image
saveAs(imageFormats.blob, 'myChart.png');
};
```
* Now, wrap your SVG with your new directive, doing:
```hmtl
```
> The `try-to-fix` is passed to the `svg-2-iamge` library to force to improve cross browser compatibility