d3.js 可视化学习笔记（二）——svg导出png保存

最新推荐文章于 2024-03-12 09:05:08 发布

VIP文章 Jeff_Le

最新推荐文章于 2024-03-12 09:05:08 发布

阅读量8k

点赞数 1

分类专栏： javascript可视化文章标签： d3 d3.js javascript 可视化

本文链接：https://blog.csdn.net/Jeff_Le/article/details/53454388

版权

先定义一个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

最低0.47元/天解锁文章

Jeff_Le

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
d3.js 可视化学习笔记（二）——svg导出png保存

先定义一个svg元素，把css代码写到svg元素里面，可以解决导出的图片不包含css样式的问题。 .axis path, .axis line{ fill: none; stroke: black; shape-rendering: crispEdges; } .axis text{ font-family: sans-s
复制链接

扫一扫