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

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： 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. 效果