【D3.js数据可视化系列教程】--（五）用层画条形图

最新推荐文章于 2020-07-22 04:06:06 发布

骚φ(゜▽゜*)♪白

最新推荐文章于 2020-07-22 04:06:06 发布

阅读量294

点赞数

分类专栏： D3.JS

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

版权

D3.JS 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

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

1 代码解释

1.1 为同类层添加样式


    
    
      
      
       
       
      
      
      
      
       
       
        
        div
        
        .bar 
        
        {
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
            display: inline-block;
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
            width: 20px;
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
            background-color: teal;
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        }

1.2 声明要为某类层设置属性

.attr("class", "bar")

1.3 为每个特定的层设置属性


    
    
      
      
       
       
      
      
      
      
       
       
        
        .style(
        
        "height", 
        
        function(d) {
       
       
      
      

      
      
       
       
      
      
      
      
       
           
        
        return (d * 
        
        5) + 
        
        "px";
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        });

1.4 设置层之间的间隔

margin-right: 2px;

2 源码


    
    
      
      
       
       
      
      
      
      
       
       
        
        <!DOCTYPE html>
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        <html>
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        <head>
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        <meta charset="utf-8">
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        <title>testD3-3-drawingDivBar
        
        </title>
       
       
      
      

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

      
      
       
       
      
      
      
      
       
       
        
        <style type="text/css">
        
        
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        div
        
        .bar
        
         
        
        {
       
       
      
      

      
      
       
       
      
      
      
      
       
           
        
        display: inline-block
        
        ;
       
       
      
      

      
      
       
       
      
      
      
      
       
           
        
        width: 20px
        
        ;
       
       
      
      

      
      
       
       
      
      
      
      
       
           
        
        margin-right: 2px
        
        ;
       
       
      
      

      
      
       
       
      
      
      
      
       
           
        
        background-color: teal
        
        ;
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        }
        
        
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        </style>
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        </head>
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        <body>
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        <script type="text/javascript">
        
        
       
       
      
      

      
      
       
       
      
      
      
      
       
        
       
       
      
      

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

      
      
       
       
      
      
      
      
       
        
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
            d3.select(
        
        "body"
        
        ).selectAll(
        
        "div"
        
        )
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                .data(dataset)
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                .enter()
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                .append(
        
        "div"
        
        )
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                .attr(
        
        "class"
        
        , 
        
        "bar"
        
        )
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                .style(
        
        "height"
        
        , 
        
        function(d) 
        
        {
       
       
      
      

      
      
       
       
      
      
      
      
       
                   
        
        return
        
         (d * 
        
        5
        
        ) + 
        
        "px"
        
        ;
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                });
       
       
      
      

      
      
       
       
      
      
      
      
       
        
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        </script>
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        </body>
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        </html>