先定义一个svg元素,把css代码写到svg元素里面,可以解决导出的图片不包含css样式的问题。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript"></script>
<script src="http://d3js.org/d3.v3.min.js" charset='utf-8'></script>
<svg>
<style type="text/css">
.axis path,
.axis line{
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text{
font-family: sans-serif;
font-size: 11px;
}
</style>
</svg>
<script type="text/javascript">
var width = 300;
var height = 300;
var dataset = [1.2, 2.3, 0.9, 1.5, 3.3, 1.7, 2.5, 1.3];
var min = d3.min(dataset);
var max = d3.max(dataset);
var padding = {left:30, right:30, top:20, bottom:20};
var svg = d3.select("svg")
.attr("wid