using d3.js to store a svg line chart as an image on the client side

Question

d3.select("#save").on("click", function(){
  var html = d3.select("svg")
        .attr("version", 1.1)
        .attr("xmlns", "http://www.w3.org/2000/svg")
        .node().parentNode.innerHTML;

  //console.log(html);
  var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html);
  var img = '<img src="'+imgsrc+'">'; 
  d3.select("#svgdataurl").html(img);

});

this is the code but its not showing the copied image at all. what is the problem? this is the code from http://techslides.com/save-svg-as-an-image/ . my line chart has mouse over and mouse click actions. i want to convert the chart as an image at the client side without server interaction. this link is the most suitable way but unable to replicate it for my chart.

Answer 1

Something is amiss in your port of it...here is a FIDDLE with the code in question and it works.

<div id="svg"></div>
<button id="save">Save as Image</button>
<div id="svgdataurl"></div>