【D3.js数据可视化系列教程】--（十一）散点图

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

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

1. 一般的散点绘制

散点图的绘制思路：

• 准备输入数据，用二维数组表示每个点的坐标
• 绘制SVG，并绑定数据
• 绘制圆元素，并用绑定的数据设置圆的属性

以下就是这个思路的实现，下面我们会介绍下调整的办法。

    
    

      
      

       
       

      
      
      
      

       
       

        
        //高宽
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
        var w = 
        
        500;
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
        var h = 
        
        100;
       
       
      
      

      
      

       
       

      
      
      
      

       
       
 
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
        var dataset = [
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
            [
        
        5, 
        
        20], [
        
        480, 
        
        90], [
        
        250, 
        
        50], [
        
        100, 
        
        33], [
        
        330, 
        
        95],
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
            [
        
        410, 
        
        12], [
        
        475, 
        
        44], [
        
        25, 
        
        67], [
        
        85, 
        
        21], [
        
        220, 
        
        88]
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
            ];
       
       
      
      

      
      

       
       

      
      
      
      

       
       
 
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
        //创建SVG
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
        var svg = d3.select(
        
        "body")
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
            .append(
        
        "svg")
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
            .attr(
        
        "width", w)
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
            .attr(
        
        "height", h);
       
       
      
      

      
      

       
       

      
      
      
      

       
       
 
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
            svg.selectAll(
        
        "circle")
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
            .data(dataset)
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
            .enter()
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
            .append(
        
        "circle")
       
       
      
      

      
      

       
       

      
      
      
      

       
       

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

      
      

       
       

      
      
      
      

       
       
        
        
        return d[
        
        0];
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
            })
       
       
      
      

      
      

       
       

      
      
      
      

       
       

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

      
      

       
       

      
      
      
      

       
       
        
        
        return d[
        
        1];
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
            })
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
            .attr(
        
        "r", 
        
        5);
       
       
      
      
    
    

  2. 点的大小

控制半径，我们可以根据Y坐标的数据来绘制上面大下面小的圆。

    
    

      
      

       
       

      
      
      
      

       
       

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

      
      

       
       

      
      
      
      

       
       
    
        
        return 
        
        Math.sqrt(h - d[
        
        1]);
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
        });
       
       
      
      
    
    

  3. 点的文本

注意文本的位置与圆中心的位置

    
    

      
      

       
       

      
      
      
      

       
       

        
        svg.selectAll(
        
        "text")
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
            .data(dataset)
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
            .enter()
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
            .append(
        
        "text")
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
            .text(
        
        function(d) {
       
       
      
      

      
      

       
       

      
      
      
      

       
       
        
        
        return d[
        
        0] + 
        
        "," + d[
        
        1];
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
            })
       
       
      
      

      
      

       
       

      
      
      
      

       
       

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

      
      

       
       

      
      
      
      

       
       
        
        
        return d[
        
        0];
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
            })
       
       
      
      

      
      

       
       

      
      
      
      

       
       

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

      
      

       
       

      
      
      
      

       
       
        
        
        return d[
        
        1];
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
            })
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
            .attr(
        
        "font-family", 
        
        "sans-serif")
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
            .attr(
        
        "font-size", 
        
        "11px")
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
            .attr(
        
        "fill", 
        
        "red");
       
       
      
      
    
    

  4. 源码

    
    

      
      

       
       

      
      
      
      

       
       

        
        <!DOCTYPE html>
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
        <html>
       
       
      
      

      
      

       
       

      
      
      
      

       
       
  
        
        <head>
       
       
      
      

      
      

       
       

      
      
      
      

       
       
        
        
        <meta charset="utf-8">
       
       
      
      

      
      

       
       

      
      
      
      

       
       
        
        
        <title>testD3-9-drawScatterPlot.html
        
        </title>
       
       
      
      

      
      

       
       

      
      
      
      

       
       
        
        
        <script type="text/javascript" src="d3.js">
        
        
        
        </script>
       
       
      
      

      
      

       
       

      
      
      
      

       
       
    
        
        <style type="text/css">
        
        
       
       
      
      

      
      

       
       

      
      
      
      

       
       
        
        
        </style>
       
       
      
      

      
      

       
       

      
      
      
      

       
       
    
        
        </head>
       
       
      
      

      
      

       
       

      
      
      
      

       
       
    
        
        <body>
       
       
      
      

      
      

       
       

      
      
      
      

       
       
        
        
        <script type="text/javascript">
        
        
       
       
      
      

      
      

       
       

      
      
      
      

       
       
            
        
        //高宽
        
        
       
       
      
      

      
      

       
       

      
      
      
      

       
       
            
        
        var
        
         w = 
        
        500
        
        ;
       
       
      
      

      
      

       
       

      
      
      
      

       
       
            
        
        var
        
         h = 
        
        100
        
        ;
       
       
      
      

      
      

       
       

      
      
      
      

       
       
 
       
       
      
      

      
      

       
       

      
      
      
      

       
       
            
        
        var
        
         dataset = [
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
                                    [
        
        5
        
        , 
        
        20
        
        ], [
        
        480
        
        , 
        
        90
        
        ], [
        
        250
        
        , 
        
        50
        
        ], [
        
        100
        
        , 
        
        33
        
        ], [
        
        330
        
        , 
        
        95
        
        ],
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
                                    [
        
        410
        
        , 
        
        12
        
        ], [
        
        475
        
        , 
        
        44
        
        ], [
        
        25
        
        , 
        
        67
        
        ], [
        
        85
        
        , 
        
        21
        
        ], [
        
        220
        
        , 
        
        88
        
        ]
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
                                  ];
       
       
      
      

      
      

       
       

      
      
      
      

       
       
 
       
       
      
      

      
      

       
       

      
      
      
      

       
       
            
        
        //创建SVG
        
        
       
       
      
      

      
      

       
       

      
      
      
      

       
       
            
        
        var
        
         svg = d3.select(
        
        "body"
        
        )
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
                                .append(
        
        "svg"
        
        )
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
                                .attr(
        
        "width"
        
        , w)
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
                                .attr(
        
        "height"
        
        , h);
       
       
      
      

      
      

       
       

      
      
      
      

       
       
 
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
                    svg.selectAll(
        
        "circle"
        
        )
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
                       .data(dataset)
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
                       .enter()
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
                       .append(
        
        "circle"
        
        )
       
       
      
      

      
      

       
       

      
      
      
      

       
       

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

      
      

       
       

      
      
      
      

       
       
                    
        
        return
        
         d[
        
        0
        
        ];
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
                       })
       
       
      
      

      
      

       
       

      
      
      
      

       
       

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

      
      

       
       

      
      
      
      

       
       
                    
        
        return
        
         d[
        
        1
        
        ];
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
                       })
       
       
      
      

      
      

       
       

      
      
      
      

       
       

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

      
      

       
       

      
      
      
      

       
       
                    
        
        return
        
         
        
        Math
        
        .sqrt(h - d[
        
        1
        
        ]);
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
                       });
       
       
      
      

      
      

       
       

      
      
      
      

       
       
 
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
                    svg.selectAll(
        
        "text"
        
        )
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
                       .data(dataset)
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
                       .enter()
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
                       .append(
        
        "text"
        
        )
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
                       .text(
        
        function(d) 
        
        {
       
       
      
      

      
      

       
       

      
      
      
      

       
       
                    
        
        return
        
         d[
        
        0
        
        ] + 
        
        ","
        
         + d[
        
        1
        
        ];
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
                       })
       
       
      
      

      
      

       
       

      
      
      
      

       
       

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

      
      

       
       

      
      
      
      

       
       
                    
        
        return
        
         d[
        
        0
        
        ];
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
                       })
       
       
      
      

      
      

       
       

      
      
      
      

       
       

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

      
      

       
       

      
      
      
      

       
       
                    
        
        return
        
         d[
        
        1
        
        ];
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
                       })
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
                       .attr(
        
        "font-family"
        
        , 
        
        "sans-serif"
        
        )
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
                       .attr(
        
        "font-size"
        
        , 
        
        "11px"
        
        )
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
                       .attr(
        
        "fill"
        
        , 
        
        "red"
        
        );
       
       
      
      

      
      

       
       

      
      
      
      

       
       
        
        
        </script>
       
       
      
      

      
      

       
       

      
      
      
      

       
       
 
       
       
      
      

      
      

       
       

      
      
      
      

       
       
    
        
        </body>
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
        </html>
       
       
      
      
    
    

  5. 效果