无法正确将svg转换为png

Question

我正在尝试将d3中设计的图表保存为png图像。我使用以下代码将d3图表保存为图像 -

var $container = $('#'+chartId),
content = $container.html().trim();
var canvas1 = document.createElement('canvas');
var w=1366,h=768;
canvas1.id     = "canvas1";
canvas1.width  = w;
canvas1.height = h;
document.getElementById('pngcon').appendChild(canvas1);

var canvas = document.getElementById('canvas1');

canvg(canvas, content);
var context = canvas.getContext('2d');
var data = context.getImageData(0, 0, w, h);
context.globalCompositeOperation = "destination-over";
context.fillStyle = "#FFFFFF";
context.fillRect(0,0,w,h);
var theImage = canvas.toDataURL('image/png');
var a = document.createElement("a");
a.id="imagepng"
a.download = fileName+".png";
a.href = theImage;
document.body.appendChild(a);
document.getElementById("imagepng").click();
$("#pngcon").html('');

$("#imagepng").remove();

我的图表如下所示：

但是在下载之后它看起来像   如您所见，轴不可见，x轴未正确显示。 我正在使用以下水平轴代码

make_y_axis = function() {
    return d3.svg.axis()
        .scale(y)
        .orient("left")
       .ticks(customTicks)
}
make_x_axis = function() {
    return d3.svg.axis()
        .scale(x)
         .orient("bottom")
         .ticks(5)
}

任何人都可以告诉我我做错了什么。