【D3.js数据可视化系列教程】--（八）使用D3绘制SVG

最新推荐文章于 2020-12-24 09:46:01 发布

骚φ(゜▽゜*)♪白

最新推荐文章于 2020-12-24 09:46:01 发布

阅读量337

点赞数

分类专栏： D3.JS

原文链接：https://blog.csdn.net/zhang__tianxu/article/details/11366447

版权

D3.JS 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

本文链接： https://blog.csdn.net/zhang__tianxu/article/details/11366447

1 创建SVG


    
    
      
      
       
       
      
      
      
      
       
       
        
        // SVG尺寸
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        var w = 
        
        500;
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        var h = 
        
        50;
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        var svg = d3.
        
        select(
        
        "body")
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                    .
        
        append(
        
        "svg")
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                    .attr(
        
        "width", w) 
        
        // 设置高宽
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                    .attr(
        
        "height", h);

2 数据驱动的SVG


    
    
      
      
       
       
      
      
      
      
       
       
        
        var dataset = [ 
        
        5, 
        
        10, 
        
        15, 
        
        20, 
        
        25 ];
       
       
      
      

      
      
       
       
      
      
      
      
       
        
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        var circles = svg.selectAll(
        
        "circle")
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                         .data(dataset)
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                         .enter()
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                         .append(
        
        "circle");
       
       
      
      

      
      
       
       
      
      
      
      
       
        
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        circles.attr(
        
        "cx", 
        
        function(d, i) {
       
       
      
      

      
      
       
       
      
      
      
      
       
               
        
        return (i * 
        
        50) + 
        
        25;
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
            })
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
           .attr(
        
        "cy", h/
        
        2)
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
           .attr(
        
        "r", 
        
        function(d) {
       
       
      
      

      
      
       
       
      
      
      
      
       
               
        
        return d;
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
           });

3 源码


    
    
      
      
       
       
      
      
      
      
       
       
        
        <!DOCTYPE html>
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        <html>
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        <head>
       
       
      
      

      
      
       
       
      
      
      
      
       
           
        
        <meta charset="utf-8">
       
       
      
      

      
      
       
       
      
      
      
      
       
           
        
        <title>testD3-7-drawSVG.html
        
        </title>
       
       
      
      

      
      
       
       
      
      
      
      
       
           
        
        <script type="text/javascript" src="http://localhost:8080/spring/js/d3.js">
        
        
        
        </script>
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        <style type="text/css">
        
        
       
       
      
      

      
      
       
       
      
      
      
      
       
           
        
        </style>
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        </head>
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        <body>
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        <script type="text/javascript">
        
        
       
       
      
      

      
      
       
       
      
      
      
      
       
           
        
        // SVG尺寸
        
        
       
       
      
      

      
      
       
       
      
      
      
      
       
           
        
        var
        
         w = 
        
        500
        
        ;
       
       
      
      

      
      
       
       
      
      
      
      
       
           
        
        var
        
         h = 
        
        50
        
        ;
       
       
      
      

      
      
       
       
      
      
      
      
       
        
       
       
      
      

      
      
       
       
      
      
      
      
       
           
        
        // 数据
        
        
       
       
      
      

      
      
       
       
      
      
      
      
       
           
        
        var
        
         dataset = [ 
        
        5
        
        , 
        
        10
        
        , 
        
        15
        
        , 
        
        20
        
        , 
        
        25
        
         ];
       
       
      
      

      
      
       
       
      
      
      
      
       
        
       
       
      
      

      
      
       
       
      
      
      
      
       
           
        
        // 创建SVG容器
        
        
       
       
      
      

      
      
       
       
      
      
      
      
       
           
        
        var
        
         svg = d3.select(
        
        "body"
        
        )
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                        .append(
        
        "svg"
        
        )
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                        .attr(
        
        "width"
        
        , 
        
        500
        
        )
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                        .attr(
        
        "height"
        
        , 
        
        50
        
        );
       
       
      
      

      
      
       
       
      
      
      
      
       
        
       
       
      
      

      
      
       
       
      
      
      
      
       
           
        
        // 创建圆
        
        
       
       
      
      

      
      
       
       
      
      
      
      
       
           
        
        var
        
         circles = svg.selectAll(
        
        "circle"
        
        )
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                .data(dataset)
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                .enter()
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                .append(
        
        "circle"
        
        );
       
       
      
      

      
      
       
       
      
      
      
      
       
        
       
       
      
      

      
      
       
       
      
      
      
      
       
           
        
        // 根据数据设置每个圆的属性
        
        
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
            circles.attr(
        
        "cx"
        
        , 
        
        function(d, i) 
        
        {
       
       
      
      

      
      
       
       
      
      
      
      
       
                   
        
        return
        
         (i * 
        
        50
        
        ) + 
        
        25
        
        ;
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                })
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
               .attr(
        
        "cy"
        
        , h/
        
        2
        
        )
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
               .attr(
        
        "r"
        
        , 
        
        function(d) 
        
        {
       
       
      
      

      
      
       
       
      
      
      
      
       
                   
        
        return
        
         d;
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
               });
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        </script>
       
       
      
      

      
      
       
       
      
      
      
      
       
        
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        </body>
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        </html>