D3 导出图片 无样式

D3 V5版本 

导出代码如下：

    exportPNG: function () {
        var serializer = new XMLSerializer();
        var source = '\r\n' + serializer.serializeToString(this.svg.node());
        var image = new Image;
        image.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source);
        var canvas = document.createElement("canvas");
        canvas.width = 1000;
        canvas.height = 800;
        var context = canvas.getContext("2d");
        context.fillStyle = '#fff'; 
        context.fillRect(0, 0, 10000, 10000);
        context.drawImage(image, 0, 0);
        image.onload = function () {
            context.drawImage(image, 0, 0);
            var a = document.createElement("a");
            a.download = "export_png.png";
            a.href = canvas.toDataURL("image/png");
            a.click();
        }
    }

初始在浏览器上显示如下

 

控件基本样式如下

  text {

    font-size: 12px;

    fill: #1A2C3F;

    text-anchor: middle;

  }

  .legend {

    position: fixed;

    font: 10px sans-serif;

    box-shadow: 2px 2px 1px #888;

  }

 

导出为：

 

解决办法：删除页面上述样式改为：

.style("font-size", "12px")

.style("text-anchor", "middle")

.style("fill", "#1A2C3F")



.style("position", "fixed")

.style("font", "10px sans-serif")

.style("box-shadow", "2px 2px 1px #888")

 

再次导出为：

 

一句话概括：改到js中编写即可.