上一章做了柱形图，https://www.cnblogs.com/littleSpill/p/10835041.html   这一章做散点图。
 
散点图(Scatter Chart),通常是一横一竖两个坐标轴，数据是一组二维坐标，分别对应两个坐标轴，与坐标轴对应的地方打上点。由此可以猜到，需要的元素包括circle(圆)和axis(坐标轴)。需要进行可视化的数据有:
 
  　　//圆心数据

          var center = [

              [0.5,0.5],[0.7,0.8],[0.4,0.9],

              [0.11,0.32],[0.88,0.25],[0.75,0.12],

              [0.5,0.1],[0.2,0.3],[0.4,0.1],[0.6,0.7]

          ]
然后定义一个SVG的绘制区域:
 
 　　//定义一个svg的绘制区域。

         var width = 600;        //svg绘制区域的宽度

         var height = 500;       //svg绘制区域的高度

         var svg = d3.select("#body")                    //选择id为body的div

                     .append("svg")                      //在<body>中添加<avg>

                     .attr("width",width)                //设定<svg>的宽度属性

                     .attr("height",height)              //设定<svg>的高度属性
数组中的每一项都是一个数组，子数组的第一项表示x值，第二项表示y值。实际应用中x轴和y轴可能对应着不同的意义，单位也可能不同。比如人口-GDP、烟龄-肺癌率等。这些数据都不可能直接用像素作单位来绘制，因为类似(0.5,0.5)、(0.7,0.8)这样的位置，即便绘制了也会看到圆都挤到一块，分不清彼此。因此要先使用比例尺将它们放大。
 
 　　//定义比例尺

         //x轴宽度

         var xAxisWidth = 300;

         //y轴宽度

         var yAxisWidth = 300;

         //x轴比例尺

         var xScale = d3.scale.linear()                          //创建一个线性比例尺

                     .domain([0,1.2*d3.max(center,function(d){   //设定定义域

                         return d[0]

                     })])

                     .range([0,xAxisWidth])                      //设定值域

         //y轴比例尺

         var yScale = d3.scale.linear()                          //创建一个线性比例尺

                     .domain([0,1.2*d3.max(center,function(d){   //设定定义域

                         return d[1]

                     })])

                     .range([0,yAxisWidth])                      //设定值域
xAxisWidth和yAxisWidth可以根据需求设定。要注意，两个比例尺都是线性比例尺，在设定定义域domain时，使用了d3.max()，这是一个求数组最大值的函数。详情见https://www.cnblogs.com/littleSpill/p/10793275.html对于x轴的比例尺来说，这里的意思是，相对于center数组的每一项，返回其子数组的第一项(d[0])组成一个新的数组，然后再求最大值。最大值前面乘了一个1.2,这是为了使得散点图不会有某一点存在于坐标轴的边缘上。
 
下面在SVG中绘制图形，先绘制圆:
 
 　　//在svg中绘制图形，先绘制圆

         //外边框

         var padding = {top:30,right:30,bottom:100,left:100};

         //绘制圆

         var circle = svg.selectAll("circle")

                         .data(center)                   //绑定数据

                         .enter()                        //获取enter部分

                         .append("circle")               //

                         .attr("fill","goldEnrod")       //设置颜色

                         .attr("cx",function(d){         //设置圆心的x坐标

                             return padding.left + xScale(d[0])

                         })

                         .attr("cy",function(d){         //设置圆心的y坐标

                             return height-padding.bottom-yScale(d[1])

                         })

                         .attr("r",5)                    //设置圆的半径
注意上面代码的粗体字部分，分别使用x轴和y轴的比例尺放大数据。
 
最后定义坐标轴:
 
  　　//定义坐标轴

         //x轴

         var xAxis = d3.svg.axis()                       //创建一个默认的新坐标轴

                         .scale(xScale)                  //设定坐标轴的比例尺

                         .orient("bottom")               //设定坐标轴的方向

         yScale.range([yAxisWidth,0])                    //重新设置y轴比例尺的值域，与原来的相反

         //y轴

         var yAxis = d3.svg.axis()                       //创建一个默认的新坐标轴

                         .scale(yScale)                  //设定坐标轴的比例尺

                         .orient("left")                 //设定坐标轴的方向

         //添加x轴和平移

         svg.append("g")                                 //在svg中添加一个包含坐标轴各元素的g元素

             .attr("class","axis")                       //定义class名

             .attr("transform","translate("+padding.left+","+(height-padding.bottom)+")")    //将x轴进行平移

             .call(xAxis)                                //将自身作为参数传递给xAxis函数

         //设置y轴和平移

         svg.append("g")                                 //在svg中添加一个包含坐标轴各元素的g元素

             .attr("class","axis")                       //定义class名

             .attr("transform","translate("+padding.left+","+(height-padding.bottom-yAxisWidth+")"))    //将y轴进行平移

             .call(yAxis)
 
看一下效果图:
 
 
 
完整代码:
 
 import React, { Component } from 'react';

 import * as d3 from 'd3'

 class ScatterChart extends Component {

     constructor(props) {

         super(props);

         this.state = {}

     }

     componentDidMount(){

         this.oneMethod()

     }

     oneMethod(){

         //圆心数据

         var center = [

             [0.5,0.5],[0.7,0.8],[0.4,0.9],

             [0.11,0.32],[0.88,0.25],[0.75,0.12],

             [0.5,0.1],[0.2,0.3],[0.4,0.1],[0.6,0.7]

         ]

         //定义一个svg的绘制区域。

         var width = 600;        //svg绘制区域的宽度

         var height = 500;       //svg绘制区域的高度

         var svg = d3.select("#body")                    //选择id为body的div

                     .append("svg")                      //在<body>中添加<avg>

                     .attr("width",width)                //设定<svg>的宽度属性

                     .attr("height",height)              //设定<svg>的高度属性

         //定义比例尺

         //x轴宽度

         var xAxisWidth = 300;

         //y轴宽度

         var yAxisWidth = 300;

         //x轴比例尺

         var xScale = d3.scale.linear()                          //创建一个线性比例尺

                     .domain([0,1.2*d3.max(center,function(d){   //设定定义域

                         return d[0]

                     })])

                     .range([0,xAxisWidth])                      //设定值域

         //y轴比例尺

         var yScale = d3.scale.linear()                          //创建一个线性比例尺

                     .domain([0,1.2*d3.max(center,function(d){   //设定定义域

                         return d[1]

                     })])

                     .range([0,yAxisWidth])                      //设定值域

         //在svg中绘制图形，先绘制圆

         //外边框

         var padding = {top:30,right:30,bottom:100,left:100};

         //绘制圆

         var circle = svg.selectAll("circle")

                         .data(center)                   //绑定数据

                         .enter()                        //获取enter部分

                         .append("circle")               //

                         .attr("fill","goldEnrod")       //设置颜色

                         .attr("cx",function(d){         //设置圆心的x坐标

                             return padding.left + xScale(d[0])

                         })

                         .attr("cy",function(d){         //设置圆心的y坐标

                             return height-padding.bottom-yScale(d[1])

                         })

                         .attr("r",5)                    //设置圆的半径

         //定义坐标轴

         //x轴

         var xAxis = d3.svg.axis()                       //创建一个默认的新坐标轴

                         .scale(xScale)                  //设定坐标轴的比例尺

                         .orient("bottom")               //设定坐标轴的方向

         yScale.range([yAxisWidth,0])                    //重新设置y轴比例尺的值域，与原来的相反

         //y轴

         var yAxis = d3.svg.axis()                       //创建一个默认的新坐标轴

                         .scale(yScale)                  //设定坐标轴的比例尺

                         .orient("left")                 //设定坐标轴的方向

         //添加x轴和平移

         svg.append("g")                                 //在svg中添加一个包含坐标轴各元素的g元素

             .attr("class","axis")                       //定义class名

             .attr("transform","translate("+padding.left+","+(height-padding.bottom)+")")    //将x轴进行平移

             .call(xAxis)                                //将自身作为参数传递给xAxis函数

         //设置y轴和平移

         svg.append("g")                                 //在svg中添加一个包含坐标轴各元素的g元素

             .attr("class","axis")                       //定义class名

             .attr("transform","translate("+padding.left+","+(height-padding.bottom-yAxisWidth+")"))    //将y轴进行平移

             .call(yAxis)                                //将自身作为参数传递给yAxis函数

     }

     render() {

         return (

             <div id="body" >

             </div>

         );

     }

 }

 export default ScatterChart;
散点图就做完了。 接下来会给大家介绍绘制颜色和一些生成器。
 
 
 
 

D3.js(v3)+react 制作 一个带坐标与比例尺的散点图 (V3版本)的更多相关文章

  1. D3.js(v3)+react 制作 一个带坐标与比例尺的柱形图 (V3版本)

    现在用D3.js + react做一个带坐标轴和比例尺的柱形图.我已经尽力把代码全部注释上了,最后我也会把完整柱形图代码奉上.如果还有疑惑的,可以去翻看一下我之前介绍的方法,以下方法都有介绍到. 还有 ...

  2. D3.js(v3)+react 制作 一个带坐标轴与比例尺的折线图

    本章使用路径生成器来绘制一个折线图.以中国和日本的GDP数据为例:   //数据 var dataList = [ { coountry : "china", gdp : [ [2 ...

  3. 4-13 Webpacker-React.js; 用React做一个下拉表格的功能: <详解>

    Rails5.1增加了Webpacker: Webpacker essentially is the decisions made by the Rails team and bundled up i ...

  4. three.js cannon.js物理引擎制作一个保龄球游戏

    关于cannon.js我们已经学习了一些知识,今天郭先生就使用已学的cannon.js物理引擎的知识配合three基础知识来做一个保龄球小游戏,效果如下图,在线案例请点击博客原文. 我们需要掌握的技能 ...

  5. js笔记（制作一个简单的计数器）

    首先编写静态页中的按钮: <input  id="result" type="button" value="该程序已经运行了0秒!"/ ...

  6. 使用React制作一个可配置的页面生成器[0]

    背景 上班两年多,终于来到一家互联网公司,告别之前的朝九晚六的腐败生活,开始了11116的码农之旅. 因为公司做的是直播相关的业务,所以伴随着直播,不定期的就会有运营活动-.- 但是这类活动留给码农的 ...

  7. 使用JS的画布制作一个瞄准镜

    <canvas width="600" height="500" id="myCanvas"></canvas> & ...

  8. D3.js(v3)+react框架 基础部分之数据绑定及其工作过程与绑定顺序

    数据绑定: 将数据绑定到Dom上,是D3最大的特色.d3.select和d3.selectAll返回的元素的选择集.选择集上是没有数据的. 数据绑定就是使被选择元素里“含有”数据. 相关函数有两个: ...

  9. D3.js学习笔记（三）——创建基于数据的SVG元素

    目标 在这一章,你将会使用D3.js,基于我们的数据来把SVG元素添加到网页中.这一过程包括:把数据绑定到元素上,然后在使用这些元素来可视化我们的数据. 注意:不同于前几章,我们从一个完整的代码开始, ...

随机推荐

  1. os.fork()----linux

    fork() 函数,它也属于一个内建并 且只在 Linux 系统下存在. 它非常特殊普通的函数调用,一次返 回但是 fork() 调用一次,返回两次.因为操作系统自动把当前进程(称为父)复制了一份(称 ...

  2. Python判断一个字符串中是否存在多个子串中的一个

    在使用python的开发过程中,常常需要判断,字符串中是否存在子串的问题, 但判断一个字符串中是否存在多个字串中的一个时,如if (a or b) in c或者if x contains a|b|c| ...

  3. mysql 5.7.20 取得动态sql执行结果

    drop procedure test; delimiter ;; CREATE procedure test() -- 取动态sql的值 begin ); ); set v_sqlcounts = ...

  4. 高德地图的权限Activity代码

    /** * */package com.amap.location.demo; import java.lang.reflect.Method;import java.util.ArrayList;i ...

  5. rest framework之视图组件

    一.APIView  APIView继承的是和django中CBV模式下的View类.View类中的dispatch方法通过反射对不同的请求方法执行不同的函数.而APIView不仅拥有这个特性,而且重 ...

  6. 【TJOI2018】教科书般的亵渎

    题面 题目描述 小豆喜欢玩游戏,现在他在玩一个游戏遇到这样的场面,每个怪的血量为\(a_i\),且每个怪物血量均不相同,小豆手里有无限张"亵渎".亵渎的效果是对所有的怪造成11点伤 ...

  7. Rikka with Competition

    Rikka with Competition 给出一个大小为n的集合\(\{a_i\}\),每次从集合中随机挑出一对数\(a_i,a_j\),如果\(|a_i-a_j|>K\),那么从集合中删掉 ...

  8. macOS免费的NTFS读写软件

    Mounty for Mac brew cask install mounty

  9. leetcood学习笔记-9

    题目描述 方法一:转换为字符串 class Solution: def isPalindrome(self, x: int) -> bool: if x<0: return False e ...

  10. 修改Centos中的ll命令(以 K 为单位显示文件大小)

    修改CentOS ll命令:以K 为单位显示文件大小 1.编辑 .bashrc 文件:vim /root/.bashrc 2.找到 alias ll 行修改为(如果没有直接添加该行):alias ll ...