D3js 将 SVG 导出为图像

Question

我正在使用这个 D3js线图。

我希望能够将其另存为图像在同一目录中，如此例所示

d3.select('#saveButton').on('click', function(){
    var svgString = getSVGString(svg.node());
    svgString2Image( svgString, 2*width, 2*height, 'png', save ); // passes Blob and filesize String to the callback

    function save( dataBlob, filesize ){
        saveAs( dataBlob, 'D3 vis exported to PNG.png' ); // FileSaver.js 
function
    }
});

运行上面没有错误

尽管我没有收到任何错误，但单击按钮时并未下载文件。我在这里缺少什么？谢谢！

Answer 1

在你的小提琴中，你将附加g到你的svg变量并将其分配给它svg：

var svg = d3.select("#priceWithMilestones")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform",
     "translate(" + margin.left + "," + margin.top + ")");

看起来getSVGString()需要根节点，而不是g元素。您可能应该更改代码，以便svg反映根 svg 元素，并创建另一个变量来存储该g元素，但是为了快速而肮脏的修复，您可以更改

var svgString = getSVGString(svg.node());

到

var svgString = getSVGString(d3.select('svg').node());

并且应该保存。更新的小提琴：https://jsfiddle.net/c19664p3/8/

编辑：对于导出的样式，在声明选择时，您似乎无法引用 svg 之外的选择器。此外，它看起来必须只包含一个 id 或一个类。请参阅我的其他答案，了解更宽松的 CSS 规则导出器。

所以改变这个：

#priceWithMilestones .line {
  fill: none;
  stroke: #14da9e;
  stroke-width: 2px;
}

到：

.line {
  fill: none;
  stroke: #14da9e;
  stroke-width: 2px;
}

仅导出 svg 的线条样式。更新的小提琴：https://jsfiddle.net/c19664p3/10/