javascript - D3js 导出 SVG 到图像

Question

我有这个 D3js line graph我正在与.

我希望能够将其作为图像保存在与 this example 所示的同一目录中

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

在您的 fiddle 中，您将 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 反射(reflect)根 svg 元素，并创建另一个变量来存储 g 元素，但是为了快速而肮脏的修复，您可以更改

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

到

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

并且应该保存。更新 fiddle :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 的线条样式。更新 fiddle :https://jsfiddle.net/c19664p3/10/