原文链接：
https://blog.csdn.net/zhang__tianxu/article/details/11783095
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. 效果
