在本地保存d3js图

时间:2014-07-19 00:20:21

标签: javascript svg d3.js save

我正在使用d3js创建一个情节。我还想让用户能够在他的计算机上本地保存该图。因此,我使用this question中提到的稍微更改的代码版本来创建该图的可下载图片。

所以我有以下代码:

$("svg").attr({ version: '1.1' , xmlns:"http://www.w3.org/2000/svg"});

var svg = $("#chart-main").html();  var b64 = btoa(unescape(encodeURIComponent(svg)));//Base64.encode(svg); // or use btoa if supported

// Works in recent Webkit(Chrome)  
$("body").append($("<img src='data:image/svg+xml;base64,\n"+b64+"' alt='file.svg'/>"));


 // Works in Firefox 3.6 and Webit and possibly any browser which supports the data-uri
  $("body").append($("<a href-lang='image/svg+xml' href='data:image/svg+xml;base64,\n"+b64+"' title='file.svg'>Download</a>"));

然而,当我按下载链接时,我收到以下错误: 此页面包含以下错误:

  第16行第6行的

错误:
  实体&#39; nbsp&#39;未定义

该链接类似于data:image/svg+xml;base64,CgkJCQkJP....CgkJCQk=

我该如何解决?

1 个答案:

答案 0 :(得分:1)

问题是&nbsp;是一个HTML实体。

作为XML格式的独立SVG文件仅支持五个预定义的XML实体:&amp;&quot;&apos;&lt;&gt;

但是,要表示任何其他unicode字符,可以使用基于unicode值的字符引用。不间断空格的代码是&#160;。使用此替换&nbsp;,您的SVG文件应该验证。

P.S。我发现FileFormat.info's character search site对于查找Unicode值非常有用。