【D3.js数据可视化系列教程】--（六）生成测试数据

最新推荐文章于 2022-06-14 22:21:40 发布

骚φ(゜▽゜*)♪白

最新推荐文章于 2022-06-14 22:21:40 发布

阅读量154

点赞数

分类专栏： D3.JS

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

版权

D3.JS 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

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

1 使用随机数值

这节内容其实很简单，主要是传递一个思想，很多时候可以用JS生成数据来完成我们的可视化创作。

d3中有大量数据操作的函数。实际上下面用原生JS生成数据的代码改成D3的方式的话会更简洁，更强大：

原生JS方式：


    
    
      
      
       
       
      
      
      
      
       
       
        
        var dataset = [];
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        for (
        
        var i = 
        
        0; i < 
        
        25; i++) {
       
       
      
      

      
      
       
       
      
      
      
      
       
           
        
        var newNumber = 
        
        Math.round(
        
        Math.random() * 
        
        30);  
        
        //随机生成0-30的整数
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
            dataset.push(newNumber);
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        }
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        // 返回 [9, 7, 23, 16, 0, 20, 20, 16, 14, 19, 1, 6, 16, 0, 27, 22, 21, 17, 29, 22, 24, 9, 1, 22, 8]

D3 方式：


    
    
      
      
       
       
      
      
      
      
       
       
        
        var dataset = d3.range(
        
        25).
        
        map(
        
        function(){
       
       
      
      

      
      
       
       
      
      
      
      
       
           
        
        return d3.round(d3.random.normal(
        
        15,
        
        8)(),
        
        1);
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        })
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        // 返回 [27.2, 12.9, 12.2, 6.8, 9.4, 7.1, 17.5, 30, 16.6, 24.3, 19, 16.6, 5.8, 6.1, 5, 32.3, 6.4, 17.5, 5.1, 19, 15.5, 22.4, 30.4, 6.2, 15.8]

下面的示例代码没有用到，但是稍微解释一下，读者朋友可以自己试试：

d3.range(25) 生成25个数字：[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24]。当然我们没有用它生成的数字，而只是用它来循环。真正生成数字的地方在map函数里。
map函数，顾名思义映射，也就是生成一个对应该位置的一个数字（当然这里强大之处不仅仅是一个数字，还可以是对象）。
我们用d3.round函数对随机数保留一位小数四舍五入。
我们用d3.random.normal(15,8)()生成一个满足期望是15，方差是8的正态分布的随机数。

2 源码


    
    
      
      
       
       
      
      
      
      
       
       
        
        <!DOCTYPE html>
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        <html>
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        <head>
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        <meta charset="utf-8">
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        <title>testD3-5-dataPower.html
        
        </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 = [];
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        for
        
         (
        
        var
        
         i = 
        
        0
        
        ; i < 
        
        25
        
        ; i++) {
       
       
      
      

      
      
       
       
      
      
      
      
       
           
        
        var
        
         newNumber = 
        
        Math
        
        .round(
        
        Math
        
        .random() * 
        
        30
        
        );  
        
        //随机生成0-30的整数
        
        
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
            dataset.push(newNumber);
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        }
       
       
      
      

      
      
       
       
      
      
      
      
       
        
       
       
      
      

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

      
      
       
       
      
      
      
      
       
       
        
            .data(dataset)
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
            .enter()
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
            .append(
        
        "div"
        
        )
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
            .attr(
        
        "class"
        
        , 
        
        "bar"
        
        )
       
       
      
      

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

      
      
       
       
      
      
      
      
       
               
        
        return
        
         (d * 
        
        5
        
        ) + 
        
        "px"
        
        ;
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
            });
       
       
      
      

      
      
       
       
      
      
      
      
       
        
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        </script>
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        </body>
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        </html>