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

最新推荐文章于 2023-04-22 18:28:37 发布

司机大傻

最新推荐文章于 2023-04-22 18:28:37 发布

阅读量1.2w

点赞数 7

分类专栏：数据可视化 D3数据可视化系列教程文章标签： d3 d3.js d3js 数据可视化

本文链接：https://blog.csdn.net/tianxuzhang/article/details/11783095

版权

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

44 篇文章 48 订阅

订阅专栏

D3数据可视化系列教程

36 篇文章 205 订阅

订阅专栏

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>