D3.js(v3)+react 制作 一个带坐标与比例尺的散点图 (V3版本)
上一章做了柱形图，https://www.cnblogs.com/littleSpill/p/10835041.html 这一章做散点图。
//圆心数据
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)
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版本)的更多相关文章
- D3.js(v3)+react 制作 一个带坐标与比例尺的柱形图 (V3版本)
现在用D3.js + react做一个带坐标轴和比例尺的柱形图.我已经尽力把代码全部注释上了,最后我也会把完整柱形图代码奉上.如果还有疑惑的,可以去翻看一下我之前介绍的方法,以下方法都有介绍到. 还有 ...
- D3.js(v3)+react 制作 一个带坐标轴与比例尺的折线图
本章使用路径生成器来绘制一个折线图.以中国和日本的GDP数据为例: //数据 var dataList = [ { coountry : "china", gdp : [ [2 ...
- 4-13 Webpacker-React.js; 用React做一个下拉表格的功能: <详解>
Rails5.1增加了Webpacker: Webpacker essentially is the decisions made by the Rails team and bundled up i ...
- three.js cannon.js物理引擎制作一个保龄球游戏
关于cannon.js我们已经学习了一些知识,今天郭先生就使用已学的cannon.js物理引擎的知识配合three基础知识来做一个保龄球小游戏,效果如下图,在线案例请点击博客原文. 我们需要掌握的技能 ...
- js笔记（制作一个简单的计数器）
首先编写静态页中的按钮: <input id="result" type="button" value="该程序已经运行了0秒!"/ ...
- 使用React制作一个可配置的页面生成器[0]
背景 上班两年多,终于来到一家互联网公司,告别之前的朝九晚六的腐败生活,开始了11116的码农之旅. 因为公司做的是直播相关的业务,所以伴随着直播,不定期的就会有运营活动-.- 但是这类活动留给码农的 ...
- 使用JS的画布制作一个瞄准镜
<canvas width="600" height="500" id="myCanvas"></canvas> & ...
- D3.js(v3)+react框架 基础部分之数据绑定及其工作过程与绑定顺序
数据绑定: 将数据绑定到Dom上,是D3最大的特色.d3.select和d3.selectAll返回的元素的选择集.选择集上是没有数据的. 数据绑定就是使被选择元素里“含有”数据. 相关函数有两个: ...
- D3.js学习笔记（三）——创建基于数据的SVG元素
目标 在这一章,你将会使用D3.js,基于我们的数据来把SVG元素添加到网页中.这一过程包括:把数据绑定到元素上,然后在使用这些元素来可视化我们的数据. 注意:不同于前几章,我们从一个完整的代码开始, ...
随机推荐
- ORACLE中的varchar2()与nvarchar2()的讲解
Oracle中NVARCHAR2和VARCHAR2的区别 [转]NVARCHAR2和VARCHAR2的区别,从使用角度来看区别在于:NVARCHAR2在计算长度时和字符集相关的,例如数据库是中文字符集 ...
- oracle中hint 详解
Hint概述 基于代价的优化器是很聪明的,在绝大多数情况下它会选择正确的优化器,减轻了DBA的负担.但有时它也聪明反被聪明误,选择了很差的执行计划,使某个语句的执行变得奇慢无比. 此时就需要DBA进行 ...
- vue-cli3使用cdn引入
1. index.html引入: <script src="https://cdn.bootcss.com/moment.js/2.20.1/moment.min.js"&g ...
- Android中使用VideoView 播放视频
VideoView一般结合MediaController类使用,它会提供一个友好的图形界面,通过该界面可以控制视频的播放 package com.test.videoview; import andr ...
- JS数组中Array.of()方法的使用
Array.of()方法的使用: Array.of()方法用于将一组数值转换为数组,举例: const a = Array.of(2,4,6,8); console.log(a); // [2,4,6 ...
- 微信小程序の条件渲染
<view> 今天吃什么 </view> <view wx:if="{{condition==1}}">饺子</view> < ...
- myeclipse 报错：Set project compiler compliance settings to '1.5'
myeclipse 报错:Set project compiler compliance settings to '1.5' 解决方法:项目右击-->properties-->java c ...
- 2018-2019 ACM-ICPC, Asia Seoul Regional Contest K TV Show Game 2-sat
题目传送门 题意: 有n个人,k盏灯,灯有红蓝两种颜色,每个人都猜了三种灯的颜色,问如何安排灯的颜色,使得每个人猜的灯至少有两个是对的. 思路: 很容易想到2-sat,但是显然枚举每个人猜对的情况是不 ...
- qdatatime大小
QDateTime time1; QDateTime time2; uint stime = time1.toTime_t(); uint etime = time2.toTime_t(); int ...
- 7、执行 suite 后，result.html 测试报告中，测试结果全部显示为通过原因分析
测试用例中,断言 异常后,必须 raise 抛出异常, 若无raise ,则测试报告中测试结果全部显示为通过. 抛出后,显示实际测试结果,通过/未通过 __author__ = 'Administra ...