D3 V5版本
导出代码如下:
exportPNG: function () {
var serializer = new XMLSerializer();
var source = '<?xml version="1.0" standalone="no"?>\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中编写即可.