上一章做了柱形图，https://www.cnblogs.com/littleSpill/p/10835041.html   这一章做散点图。
 
散点图(Scatter Chart),通常是一横一竖两个坐标轴，数据是一组二维坐标，分别对应两个坐标轴，与坐标轴对应的地方打上点。由此可以猜到，需要的元素包括circle(圆)和axis(坐标轴)。需要进行可视化的数据有:
 
  1.   　　//圆心数据
  2.           var center = [
  3.               [0.5,0.5],[0.7,0.8],[0.4,0.9],
  4.               [0.11,0.32],[0.88,0.25],[0.75,0.12],
  5.               [0.5,0.1],[0.2,0.3],[0.4,0.1],[0.6,0.7]
  6.           ]
然后定义一个SVG的绘制区域:
 
  1.  　　//定义一个svg的绘制区域。
  2.          var width = 600;        //svg绘制区域的宽度
  3.          var height = 500;       //svg绘制区域的高度
  4.  
  5.          var svg = d3.select("#body")                    //选择id为body的div
  6.                      .append("svg")                      //在<body>中添加<avg>
  7.                      .attr("width",width)                //设定<svg>的宽度属性
  8.                      .attr("height",height)              //设定<svg>的高度属性
数组中的每一项都是一个数组，子数组的第一项表示x值，第二项表示y值。实际应用中x轴和y轴可能对应着不同的意义，单位也可能不同。比如人口-GDP、烟龄-肺癌率等。这些数据都不可能直接用像素作单位来绘制，因为类似(0.5,0.5)、(0.7,0.8)这样的位置，即便绘制了也会看到圆都挤到一块，分不清彼此。因此要先使用比例尺将它们放大。
 
  1.  　　//定义比例尺
  2.          //x轴宽度
  3.          var xAxisWidth = 300;
  4.          //y轴宽度
  5.          var yAxisWidth = 300;
  6.          //x轴比例尺
  7.          var xScale = d3.scale.linear()                          //创建一个线性比例尺
  8.                      .domain([0,1.2*d3.max(center,function(d){   //设定定义域
  9.                          return d[0]
  10.                      })])
  11.                      .range([0,xAxisWidth])                      //设定值域
  12.          //y轴比例尺
  13.          var yScale = d3.scale.linear()                          //创建一个线性比例尺
  14.                      .domain([0,1.2*d3.max(center,function(d){   //设定定义域
  15.                          return d[1]
  16.                      })])
  17.                      .range([0,yAxisWidth])                      //设定值域
xAxisWidth和yAxisWidth可以根据需求设定。要注意，两个比例尺都是线性比例尺，在设定定义域domain时，使用了d3.max()，这是一个求数组最大值的函数。详情见https://www.cnblogs.com/littleSpill/p/10793275.html对于x轴的比例尺来说，这里的意思是，相对于center数组的每一项，返回其子数组的第一项(d[0])组成一个新的数组，然后再求最大值。最大值前面乘了一个1.2,这是为了使得散点图不会有某一点存在于坐标轴的边缘上。
 
下面在SVG中绘制图形，先绘制圆:
 
  1.  　　//在svg中绘制图形，先绘制圆
  2.          //外边框
  3.          var padding = {top:30,right:30,bottom:100,left:100};
  4.          //绘制圆
  5.          var circle = svg.selectAll("circle")
  6.                          .data(center)                   //绑定数据
  7.                          .enter()                        //获取enter部分
  8.                          .append("circle")               //
  9.  
  10.                          .attr("fill","goldEnrod")       //设置颜色
  11.                          .attr("cx",function(d){         //设置圆心的x坐标
  12.                              return padding.left + xScale(d[0])
  13.                          })
  14.                          .attr("cy",function(d){         //设置圆心的y坐标
  15.                              return height-padding.bottom-yScale(d[1])
  16.                          })
  17.                          .attr("r",5)                    //设置圆的半径
注意上面代码的粗体字部分，分别使用x轴和y轴的比例尺放大数据。
 
最后定义坐标轴:
 
  1.   　　//定义坐标轴
  2.          //x轴
  3.          var xAxis = d3.svg.axis()                       //创建一个默认的新坐标轴
  4.                          .scale(xScale)                  //设定坐标轴的比例尺
  5.                          .orient("bottom")               //设定坐标轴的方向
  6.  
  7.          yScale.range([yAxisWidth,0])                    //重新设置y轴比例尺的值域，与原来的相反
  8.  
  9.          //y轴
  10.          var yAxis = d3.svg.axis()                       //创建一个默认的新坐标轴
  11.                          .scale(yScale)                  //设定坐标轴的比例尺
  12.                          .orient("left")                 //设定坐标轴的方向
  13.  
  14.          //添加x轴和平移
  15.          svg.append("g")                                 //在svg中添加一个包含坐标轴各元素的g元素
  16.              .attr("class","axis")                       //定义class名
  17.              .attr("transform","translate("+padding.left+","+(height-padding.bottom)+")")    //将x轴进行平移
  18.              .call(xAxis)                                //将自身作为参数传递给xAxis函数
  19.  
  20.          //设置y轴和平移
  21.          svg.append("g")                                 //在svg中添加一个包含坐标轴各元素的g元素
  22.              .attr("class","axis")                       //定义class名
  23.              .attr("transform","translate("+padding.left+","+(height-padding.bottom-yAxisWidth+")"))    //将y轴进行平移
  24.              .call(yAxis)
 
看一下效果图:
 
 
 
完整代码:
 
  1.  import React, { Component } from 'react';
  2.  import * as d3 from 'd3'
  3.  class ScatterChart extends Component {
  4.      constructor(props) {
  5.          super(props);
  6.          this.state = {}
  7.      }
  8.  
  9.      componentDidMount(){
  10.          this.oneMethod()
  11.      }
  12.  
  13.      oneMethod(){
  14.  
  15.          //圆心数据
  16.          var center = [
  17.              [0.5,0.5],[0.7,0.8],[0.4,0.9],
  18.              [0.11,0.32],[0.88,0.25],[0.75,0.12],
  19.              [0.5,0.1],[0.2,0.3],[0.4,0.1],[0.6,0.7]
  20.          ]
  21.  
  22.          //定义一个svg的绘制区域。
  23.          var width = 600;        //svg绘制区域的宽度
  24.          var height = 500;       //svg绘制区域的高度
  25.  
  26.          var svg = d3.select("#body")                    //选择id为body的div
  27.                      .append("svg")                      //在<body>中添加<avg>
  28.                      .attr("width",width)                //设定<svg>的宽度属性
  29.                      .attr("height",height)              //设定<svg>的高度属性
  30.  
  31.          //定义比例尺
  32.          //x轴宽度
  33.          var xAxisWidth = 300;
  34.          //y轴宽度
  35.          var yAxisWidth = 300;
  36.          //x轴比例尺
  37.          var xScale = d3.scale.linear()                          //创建一个线性比例尺
  38.                      .domain([0,1.2*d3.max(center,function(d){   //设定定义域
  39.                          return d[0]
  40.                      })])
  41.                      .range([0,xAxisWidth])                      //设定值域
  42.          //y轴比例尺
  43.          var yScale = d3.scale.linear()                          //创建一个线性比例尺
  44.                      .domain([0,1.2*d3.max(center,function(d){   //设定定义域
  45.                          return d[1]
  46.                      })])
  47.                      .range([0,yAxisWidth])                      //设定值域
  48.  
  49.          //在svg中绘制图形，先绘制圆
  50.          //外边框
  51.          var padding = {top:30,right:30,bottom:100,left:100};
  52.          //绘制圆
  53.          var circle = svg.selectAll("circle")
  54.                          .data(center)                   //绑定数据
  55.                          .enter()                        //获取enter部分
  56.                          .append("circle")               //
  57.  
  58.                          .attr("fill","goldEnrod")       //设置颜色
  59.                          .attr("cx",function(d){         //设置圆心的x坐标
  60.                              return padding.left + xScale(d[0])
  61.                          })
  62.                          .attr("cy",function(d){         //设置圆心的y坐标
  63.                              return height-padding.bottom-yScale(d[1])
  64.                          })
  65.                          .attr("r",5)                    //设置圆的半径
  66.  
  67.          //定义坐标轴
  68.          //x轴
  69.          var xAxis = d3.svg.axis()                       //创建一个默认的新坐标轴
  70.                          .scale(xScale)                  //设定坐标轴的比例尺
  71.                          .orient("bottom")               //设定坐标轴的方向
  72.  
  73.          yScale.range([yAxisWidth,0])                    //重新设置y轴比例尺的值域，与原来的相反
  74.  
  75.          //y轴
  76.          var yAxis = d3.svg.axis()                       //创建一个默认的新坐标轴
  77.                          .scale(yScale)                  //设定坐标轴的比例尺
  78.                          .orient("left")                 //设定坐标轴的方向
  79.  
  80.          //添加x轴和平移
  81.          svg.append("g")                                 //在svg中添加一个包含坐标轴各元素的g元素
  82.              .attr("class","axis")                       //定义class名
  83.              .attr("transform","translate("+padding.left+","+(height-padding.bottom)+")")    //将x轴进行平移
  84.              .call(xAxis)                                //将自身作为参数传递给xAxis函数
  85.  
  86.          //设置y轴和平移
  87.          svg.append("g")                                 //在svg中添加一个包含坐标轴各元素的g元素
  88.              .attr("class","axis")                       //定义class名
  89.              .attr("transform","translate("+padding.left+","+(height-padding.bottom-yAxisWidth+")"))    //将y轴进行平移
  90.              .call(yAxis)                                //将自身作为参数传递给yAxis函数
  91.  
  92.      }
  93.  
  94.      render() {
  95.          return (
  96.              <div id="body" >
  97.  
  98.              </div>
  99.          );
  100.      }
  101.  }
  102.  
  103.  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. 2.1 Nginx服务器安装

    2.1 Nginx目录和文件介绍 windows下解压nginx后的文件介绍: conf:存放Nginx服务器的配置文件,包含Nginx服务器的基本配置文件和对部分特性的配置文件,正确配置此文件可以保 ...

  2. SQL必知必会第四版自学前期表格数据的准备

    show databases;create database SAMS;use SAMS;-- 建立数据库,创建表格-- Create Customers table CREATE TABLE Cus ...

  3. 14-vim-替换命令-01-替换

    命令 英文 功能 工作模式 r replace 替换当前字符 命令模式 R replace 进入替换模式 替换模式 R命令进入替换模式,输入新字符替换当前光标所在位置的字符,替换完成后,按下ESC可以 ...

  4. 同一子网建立ssh通道，映射到本地

    在办公室有一台机器连入同一子网络,开启jupyter-notebook但是只能在这台机器上访问到,怎样可以在家也可以访问呢? 此时最简单的方法是在本地建立一个ssh通道: 在本地终端中输入 ssh u ...

  5. Tensorflow的基础用法

    简介 Tensorflow是一个深度学习框架,它使用图(graph)来表示计算任务,使用tensor(张量)表示数据,图中的节点称为OP,在一个会话(Session)的上下文中执行运算,最终产生ten ...

  6. C#排序 转

    本文链接:https://blog.csdn.net/fysuccess/article/details/36416255 C#中List<T>排序的两种方法 List<Studen ...

  7. idea 右键没有class文件的问题，，

    修改文件夹的  属性  蓝色即为java代码,,绿色为test,,等等

  8. web框架express学习一

    服务端 node app.jsapp.jslet express = require("express"); let http = require("http" ...

  9. 阿里云高磊：API网关加速能力聚合与生态集成

    导读:本文中,阿里云高级技术专家高磊(花名:埃兰)将聚焦API网关加速能力聚合与生态集成,讲述API如何实现系统间的衔接和API网关的产品升级进程,重点展示了一些新功能.新体验和新变化. 大家下午好, ...

  10. AC自动机处理多串匹配——cf1202E

    si+sj中间有一个切割点,我们在t上枚举这个切割点i,即以t[i]作为最后一个字符时求有多少si可以匹配,以t[i+1]作为第一个字符时有多少sj可以匹配 那么对s串正着建一个ac自动机,反着建一个 ...