How to save d3 graph as image on local machine?

Question

HTML Code:

<div id="chart"></div>

<div id="canvas-option">
    <label>File Name : 
        <input type="text" id="canvas-filename" placeholder="image"/>.png</label>
        <input type="submit" value="Save">
</div>

Script Code:

 var canvas = d3.select("#chart").append("svg")
     .attr("id","svg_graph")
     .attr("width",width)
     .attr("height",height);



> canvas_option_form = $("canvas-option"),  canvas1 = $("chart"),
>   canvas_filename=$("canvas-filename")
>   canvas_option_form.addEventListener("submit",function(event)    {
>       event.preventDefault();         canvas1.toBlob(function(blob)       {
>           saveAs(blob,(canvas_filename.value ||
>                                 canvas_filename.placeholder)+".png");         },"image/png");     },false);

so i want it svg to save as png or any other image formate at local machine.

Answer 1

There is a NPM package for that. It's called svg-2-image. In case you use AngularJS, there is another one called d3-to-image.

Check it out:

https://www.npmjs.com/package/svg-2-image and https://www.npmjs.com/package/d3-to-image