在本地保存 d3js 绘图答案

【问题标题】：Saving d3js plot locally在本地保存 d3js 绘图
【发布时间】：2014-09-10 05:04:03
【问题描述】：

我正在使用 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>"));

但是，当我点击下载链接时，我收到以下错误：此页面包含以下错误：

第 6 行第 16 列的错误：
实体“nbsp”未定义

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

我该如何解决这个问题？

【问题讨论】：

标签： javascript svg d3.js save

【解决方案1】：

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

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

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

附：我发现 FileFormat.info's character search site 对于查找 Unicode 值很有用。

【讨论】：