您的位置：首页 > Web前端 > JavaScript

【D3.js数据可视化系列教程】--（十四）有路径的文字

2013-09-17 18:35 627 查看

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
});

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 d3.js d3js 数据可视化

相关文章推荐

新的分享

章节导航