无法正确导出D3图表

Question

我试图在按钮点击时将d3图表导出为png图像。此外，我在下面提到了我在这里使用的功能：

$(function() {
  $('#btnSave').click(function(){
    html2canvas($('#test'), 
    {
      onrendered: function (canvas) {
        var a = document.createElement('a');
        // toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
        a.href = canvas.toDataURL();
        a.download = 'somefilename.jpg';
        a.click();
      }
    });
  });

});

当我点击导出按钮时，我没有正确获取图表。我也提到了导出后我获得的屏幕截图。

Answer 1

我建议不要在这里使用html2Canvas，因为捕获任何SVG图像都会在画布上产生污点，而且这个库不允许这样做（除非你强制使用allowTaint：true，这也不是一个好的选择）。 以下是您可以解决的问题：SVG Taint on canvas

这是捕捉SVG的方法：

JS FIDDLE

在没有任何特殊库的情况下捕获图像的相关代码：

var svgString = new XMLSerializer().serializeToString(d3.select('body svg#custom_id').node()),
    blob = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"}),
  url = window.URL.createObjectURL(blob);

var img = d3.select('body').append('img').classed('exportImg', true).node();
img.onload = function () {
    var canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d');
    canvas.width = w + m[1] + m[3];
    canvas.height = h + m[0] + m[2];
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
   // $('body').append(canvas);
    d3.select('img.exportImg').remove();

    // create link
    var a = document.createElement('a');
    a.href = canvas.toDataURL();
    a.download = 'somefilename';
    a.click();
};
img.src = url;

通过在路径中添加样式，我的意思是，不使用CSS（我很抱歉，我不清楚）。这就是我所说的：

 .enter().append("svg:path")
 .attr("d", path).style('fill', 'none').style('stroke', 'steelblue').style('stroke-opacity', 0.7).style('stroke-width', 1.5);

为前景和背景添加了相同的内容。您也可以以类似的方式对轴进行样式设置。创建SVG字符串时不会捕获CSS属性。

希望这会有所帮助。 （我已经为图像使用了样本base64代码，因为这些图像不可用，你可以改变它）：）