路径加文字

最新推荐文章于 2021-09-05 22:34:42 发布

原创最新推荐文章于 2021-09-05 22:34:42 发布 · 993 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#d3 #js #d3 force #数据可视化

数据可视化同时被 2 个专栏收录

12 篇文章

订阅专栏

8 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
       <meta charset="utf-8">
       <title>testD3-12-text.html</title>
       <script type="text/javascript" src="d3.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>