使用d3.js在客户端存储svg折线图作为图像 [英] using d3.js to store a svg line chart as an image on the client side

问题描述

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 / 。我的折线图有鼠标和鼠标点击动作。我想将图表转换为客户端的图像，无需服务器交互。这个链接是最合适的方式，但无法为我的图表复制它。

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.

推荐答案

..这是一个 FIDDLE 与有问题的代码，它的工作原理。

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>

这篇关于使用d3.js在客户端存储svg折线图作为图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！