javascript - 无法正确导出 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 图像都会在 Canvas 上产生污点，而这个库不允许这样做(除非你强制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 代码，因为这些图像不可用，您可以更改它):)