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
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
.module('yourAwesomeApp', [
'ngRoute',
// ...
'ngD3ToImage' // <<< Add this!
])
- Then, for example, add a button that will call a
exportPNG
function to "run the export process", doing:
<a ng-click="exportPNG()">Export SVG to PNG</a>
- Then, define your callback function that will be called when the image finished to be created:
$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:
<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