【D3.V3.js系列教程】--(十四)有路径的文字

【D3.V3.js系列教程】--(十四)有路径的文字

1、 在 svg 中插入一個 text

// 在 body 中插入一個 svg
var svg = d3.select('body').append('svg');
 
// 在 svg 中插入一個 text
svg.append('text')
.attr('x', 10)
.attr('y', 20)
.style('fill', 'steelblue')
.style('font-size', '24px')
.style('font-weight', 'bold')
.text('.text加入文字测试!');

2、添加文字路径

 // 先在 svg 中插入一個 path
svg.append('path').attr({
id: 'mypath',
d: 'M50 100Q350 50 350 250Q250 50 50 250'
}).style({
fill: 'none',
stroke: 'green',
'stroke-width': 10
});

.append('textPath').attr({//引用路径
'xlink:href': '#mypath'
})

3、源码

<!DOCTYPE html>

<html>

  <head>

		<meta charset="utf-8">

		<title>testD3-12-text.html</title>

		<script type="text/javascript" src="http://localhost:8080/spring/js/d3.v3.js"></script>

	<style type="text/css">

	</style>

	</head>

	<body>

		<script type="text/javascript">

// 在 body 中插入一個 svg

	var svg = d3.select('body').append('svg');

 // 先在 svg 中插入一個 path

	svg.append('path').attr({

		id: 'mypath',

		d: 'M50 100Q350 50 350 250Q250 50 50 250'

	}).style({

		fill: 'none',

		stroke: 'green',

		'stroke-width': 10

	});

	// 在 svg 中插入一個 text

	svg.append('text')

	.attr('x', 10)

	.attr('y', 20)

	.style('fill', 'steelblue')

	.style('font-size', '24px')

	.style('font-weight', 'bold')

	.append('textPath').attr({//引用路径

		'xlink:href': '#mypath'

	})

	.text('.text加入文字测试!并用xlink:href: #mypath加入了路径');

		</script>



	</body>

</html>



4、效果

【D3.V3.js系列教程】--(十四)有路径的文字

 

你可能感兴趣的:(js)