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
Let's improve this doc in a future.
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<script src="[path]/d3-to-image/lib/d3-to-image-ngDirective.min.js"></script>
. - Add ngD3ToImage as dependency in your App, doing:
angular
- Then, for example, add a button that will call a
exportPNG
function to "run the export process", doing:
Export SVG to PNG
- Then, define your callback function that will be called when the image finished to be created:
$scope { // Let's use FileSave library to download the image ;};
- Now, wrap your SVG with your new directive, doing:
<d3-to-image data-try-to-fix="true" callback="d3ToImageCallback" export="exportPNG"> <svg...></svg> <!-- Here you can have D3, NVD3, or whatever. --></d3-to-image>
The
try-to-fix
is passed to thesvg-2-iamge
library to force to improve cross browser compatibility