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);

});

这是代码，但根本没有显示复制的图像。问题是什么？这是来自http://techslides.com/save-svg-as-an-image/的代码。我的折线图有鼠标悬停和鼠标点击操作。我想在没有服务器交互的情况下将图表转换为客户端的图像。此链接是最合适的方式，但无法为我的图表复制它。

Answer 1

你的端口有些不对劲......这里有一个FIDDLE，代码有问题而且有效。

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

使用d3.js将svg折线图存储为客户端的图像

1 个答案: