散点图

最新推荐文章于 2024-04-28 09:44:29 发布
最新推荐文章于 2024-04-28 09:44:29 发布
阅读量4.3k 收藏
点赞数
分类专栏： D3和SVG
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yushiershi/article/details/80966853
版权
首先需要建立坐标轴，详见 https://blog.csdn.net/yushiershi/article/details/80936859
然后就只剩下画点了，需要准备好点数据、比例尺，比例尺与坐标轴相同

点数据没有必然的规定，根据自己需要使用什么就放什么。例如我需要设置点的坐标（x,y），名称，大小，颜色，都可以放进去 
var datas = [];
for(var i=0;i<10;i++){
	var x = Math.floor(Math.random()*2000)/100-10;
	var y = Math.floor(Math.random()*2000)/100;
	var name = "点"+(i+1);
	var size = Math.random()+1;
	var color = "#";
	for(i=0;i<3;i++){
		var num = Math.floor(Math.random()*256).toString(16);
		color += num.length==1?"0"+num:num;
	}
	datas.push([x,y,name,size,color]);
}

svg生成点图形
首先是获取当前已有点，注意这些点在画布上已经存在，可以修改各种属性，但是不需要重新生成 
var circleUpdate=svg.selectAll("circle").data(datas);
circleUpdate
        //动画设置
        .transition()  
        .duration(500)  
        //动画设置
        .attr("cx",function(d){
            return padding+xScale(d[0]);  
        })  
        .attr("cy",function(d){  
            return padding+yScale(d[1]);  
        })
        .attr("fill", function(d){
            return d[4];
        })
        .attr("r",function (d) {
            return d[3];
        });
circleUpdate.selectAll("title")
	.text(function(d){
		return d[2];
	});
如果datas的数量变多了，那么需要新增点 
var circleEnter=circleUpdate.enter();  
circleEnter.append("circle") 
        //动画开始前
	.attr("fill","black")  
	.attr("cx",padding)  
	.attr("cy",padding)  
	.attr("r",5)  
        //动画开始前
        //动画设置
	.transition()  
	.duration(500) 
        //动画设置 
	.attr("cx",function(d){
		return padding+xScale(d[0]);  
	})  
	.attr("cy",function(d){  
		return padding+yScale(d[1]);  
	})
	.attr("fill", function(d){
		return d[4];
	})
	.attr("r",function (d) {
		return d[3];
	});
circleEnter.append("title")
	.text(function(d){
		return d[2];
	})
	.attr("fill","black");
如果datas的数量减少了，那么需要减少点 
var circleExit=circleUpdate.exit();
circleExit
        //动画设置
        .transition()  
	.duration(500) 
        //动画设置 
	.attr("fill","white")  
	.remove();
这个是带动画过渡的，如果不需要动画，直接将动画开始时候属性和动画设置两部分去掉即可
fill图形内部颜色，stroke图形边框颜色
cx、cy圆心坐标，用比例尺如何换算坐标在坐标轴中写过
r是半径大小
svg给圆点生成标题，可以直接放到圆点内部使用title
text是title内容，颜色使用fill

完整代码 
<!doctype html>
<html lang="zh-CN">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  <title>散点图</title>
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
 </head>
 <body>
  <div id="content">  </div> 
  <button οnclick="updateCircles()">修改圆点</button>
  <button οnclick="addCircles()">增加圆点</button>
  <button οnclick="minusCircles()">减少圆点</button>
  <button οnclick="minusCirclesNew()">减少圆点图像不变</button>
<script>
//创建svg
var width=400;  
var height=300;    
var padding = 50;
var svg=d3.select("body").select("#content")  
            .append("svg")  
            .attr("width",width)  
            .attr("height",height); 
//创建比例尺
var xScale= d3.scale.linear() 
  .domain([-10, 10])
  .range([0, width - padding*2]);
var yScale= d3.scale.linear() 
  .domain([0, 20])
  .range([height - padding*2, 0]);
//创建坐标轴
var xAxis=d3.svg.axis()  
                .scale(xScale)  
                .orient("bottom")
				.ticks(5);
var yAxis=d3.svg.axis()  
                .scale(yScale)  
                .orient("right")
				.ticks(5);
//绘制坐标轴
svg.append("g")  
		.attr("id","xaxis")  
		.attr("transform","translate("+padding+","+(height-padding)+")")
		.attr("stroke","gray")
		.attr("fill","none")
        .call(xAxis); 
svg.append("g")  
		.attr("id","yaxis")
		.attr("transform","translate("+(xScale(0)+padding)+","+padding+")") 
		.attr("stroke","gray")
		.attr("fill","none")
        .call(yAxis); 


//创建点数据
var datas = getDatas(50);
function getDatas(len,arr){
	var maxlen = 0;
	if(!arr){
		arr = [];
	}else{
		var name = arr[arr.length-1][2];
		maxlen = parseInt(name.substr(name.length-2));
	}
	for(var i=0;i<len;i++){
		var x = Math.floor(Math.random()*2000)/100-10;
		var y = Math.floor(Math.random()*2000)/100;
		var size = Math.random()+2;
		var color = "#";
		for(j=0;j<3;j++){
			var num = Math.floor(Math.random()*256).toString(16);
			color += num.length==1?"0"+num:num;
		}
		arr.push([x,y,"",size,color]);
	}
	for(var i=0;i<arr.length;i++){
		arr[i][2] = "点"+(i+1);
	}
	return arr;
}

//生成图形
refreshCircles();

//修改散点
function updateCircles(){
	datas = getDatas(datas.length);
	refreshCircles();
}
//增加圆点
function addCircles(){
	if(datas.length>100){
		alert("对不起，圆点数量已经超过100个，不能再增加");
		return;
	}
	getDatas(5,datas);
	refreshCircles();
}
//减少圆点
function minusCircles(){
	if(datas.length<10){
		alert("对不起，圆点数量已经小于10个，不能再减少");
		return;
	}
	datas.splice(0,5);
	refreshCircles();
}
//减少圆点图像不变
function minusCirclesNew(){
	if(datas.length<10){
		alert("对不起，圆点数量已经小于10个，不能再减少");
		return;
	}
	datas.splice(-5,5);
	refreshCircles();
}
//更新图像
function refreshCircles(){
	var circleUpdate=svg.selectAll("circle").data(datas);
	var circleEnter=circleUpdate.enter();  
    var circleExit=circleUpdate.exit();
	//数量不变
	circleUpdate.transition()  
		.duration(500)  
		.attr("cx",function(d){
			return padding+xScale(d[0]);  
		})  
		.attr("cy",function(d){  
			return padding+yScale(d[1]);  
		})
		.attr("fill", function(d){
			return d[4];
		})
		.attr("r",function (d) {
			return d[3];
		});
	circleUpdate.selectAll("title")
		.text(function(d){
			return d[2];
		});
	//数量增加
	circleEnter.append("circle") 
	    .attr("fill","black")  
		.attr("cx",padding)  
		.attr("cy",padding)  
		.attr("r",7)  
		.transition()  
		.duration(500)  
		.attr("cx",function(d){
			return padding+xScale(d[0]);  
		})  
		.attr("cy",function(d){  
			return padding+yScale(d[1]);  
		})
		.attr("fill", function(d){
			return d[4];
		})
		.attr("r",function (d) {
			return d[3];
		});
	circleEnter.append("title")
		.text(function(d){
			return d[2];
		})
		.attr("fill","black");
	//数量减少
	circleExit.transition()  
		.duration(500)  
		.attr("fill","white")  
		.remove();
}
</script>
 </body>
</html>


Lisa11321
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Matlab绘图系列教程-基础绘图：散点图 (scatter函数 )
图灵的猫的博客
07-06 2万+
散点图是一种常用的数据可视化工具，能够展示数据之间的关系和分布情况。在Matlab中，绘制散点图非常简单，同时又具有丰富的功能和灵活的定制选项。本教程将逐步引导你学习Matlab中绘制散点图的方法和技巧，并通过详细的解释、示例和有趣的案例分析，帮助你全面了解散点图绘制的过程。
散点图教程
Warren Lynch 的博客
12-13 9628
散点图（也称为散点图和相关图）是一种分析两个变量之间关系的工具，用于确定两个变量之间的相关程度。 一个变量绘制在水平轴上，另一个绘制在垂直轴上。它们的交点的模式以图形方式显示了关系模式。它是质量七项基本工具之一。 代码变量 如果点已编码（颜色/形状/大小），则可以显示附加变量。数据显示为点的集合。对于每个点，一个变量的值决定了水平轴上的位置，另一个变量的值决定了垂直轴上的位置。 编辑此图表 最常见的是散点图用于证明或反驳因果关系。尽管该图显示了这种关系，但并不能证明一个变量会导致另一个
什么是散点图？
m0_69539167的博客
02-02 4757
散点图，顾名思义就是使用一些散乱的点来展示数据的一种图表，这些点在哪个位置，是由其X值和Y值确定的，因此散点图也叫做XY散点图。
密度散点图的绘制（画图基本知识）
最新发布
weixin_53637133的博客
04-28 281
密度散点图的绘制（画图基本知识）
科研绘图二：箱线图（抖动散点）
chj65的博客
03-17 870
当每个组的数据点相对较少时，又需要显示出各组数据的分布情况时，可以采用箱线图叠加散点图的方式来表达数据。
【Python可视化系列】一文教你绘制不同类型的散点图（理论+源码）
数据杂坛
12-27 5836
一文教你绘制不同类型的散点图（理论+源码）
散点图基础
weixin_45615607的博客
12-07 525
气泡效果： 大小：symbolSize（ 支持回调函数） 颜色：itemStyle.color（ 支持回调函数） 涟漪动画 type：effectScatter showEffectOn：'emphasis'//render（鼠标划过） rippleEffect：scale（设置大小） <!DOCTYPE html> <html lang="en"> <head&...
散点图绘制
Hql_ztz的博客
06-17 927
import matplotlib.pylab as plt import numpy as np 加载数据 data = np.load("./国民经济核算季度数据.npz") print(data) columns = data[“columns”] values = data[“values”] 创建画布 plt.figure() 准备数据 x = values[:,0] 所有行的3,4,5...
python2.7使用plotly绘制本地散点图和折线图
09-19
主要为大家详细介绍了python2.7使用plotly绘制本地散点图和折线图实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Python散点图与折线图绘制过程解析
09-18
本文将深入探讨如何使用Python绘制散点图和折线图，这两种图表在数据分析中都非常常见。 首先，我们需要导入必要的库，这里是`matplotlib.pyplot`，通常简称为`plt`，用于创建图形和图像，以及`matplotlib.font_...
基于XGBoost的数据回归预测Python代码 包含散点图和折线图可视化
08-07
此外，我们使用散点图和折线图可视化结果。 使用命令python xgboost_regression.py运行脚本，脚本将生成两个散点图，分别对比训练集和测试集的真实值和预测值。此外，还将绘制一个折线图，显示测试集中每个样本的...
Python生成3D图，饼图，合图，散点图，折线图，柱状图
01-26
4. **散点图**：散点图用于表示两个变量之间的关系，每个点代表一个数据样本。在Python中，可以使用`plt.scatter()`函数绘制散点图。可以调整点的大小、颜色以反映第三个变量，或者添加透明度（alpha）来显示数据...
《大话脑影像》之：趣谈散点图与相关系数
cc1609130201的博客
02-21 8432
最近不少读者对高大上的机器学习，动态脑网络，曲面形态指标共变网络感到爱不起，针对于此，我们特别推出一些基本的做脑功能的概念讲解，希望大家一步一步来，年轻人，不要动不动想一步登天，识得唔识得啊？ 那今天我们就谈谈这个相关系数……. 说起相关系数，从字面上的含义就可看出，就是两个信号之间的相关性。但是你真正理解内在的机理吗？ 结论放在最前面：相关系数，其实就是通过散点图来的。 ...
matplotlib之散点图
追逐阳光的风
04-27 3801
文章目录散点图scatter函数1、函数定义：2、scatter的详细定义：示例说明：1）正相关2）负相关3）不相关扩展应用：1、添加图列2、标记点符号3、三维散点图4、添加边界5、散点直方图总结 散点图 Scatter chart(PointGraph, X-Y Plot, Scatter Chart或者 Scattergram）是绘图中最常见的图形类型之一，通常用于显示和比较数值。散点图是使用一系列的散点在直角坐标系中展示变量的数值分布。在二维散点图中，可以通过观察两个变量的数据分析，发现两者的关系.
QQ图判断一个分布是否为正态分布
热门推荐
陋室逢雨
01-27 9万+
一、正态QQ图的原理 QQ图通过把测试样本数据的分位数与已知分布相比较，从而来检验数据的分布情况。[1] 分位数：亦称分位点，是指将一个随机变量的概率分布范围分为几个等份的数值点。常用的有一个分位数叫，百分位数，它是指如果将一组数据从小到大排序，并计算相应的累计百分位，则某一百分位所对应数据的值就称为这一百分位的百分位数。 QQ图是一种散点图，对应于正态分布的QQ图，就是由标准正态分布的分位
描述性统计图表——散点图
qq_43146264的博客
02-05 5060
不仅如此，如果有三个变量，并且自变量为分类变量，散点图通过对点的形状或者点的颜色来区分，即可了解这些变量之间的关系。如果所有的变量为连续性变量，还可以在许多统计软件中绘制高维散点图。如果把一些个案也就是同一个自变量的点连接起来，就成为了线图，也就是表示因变量指标是上升还是下降的。适用范围：当估计两个变量之间存在相关关系时，用散点图进行确认，并观察和确定两者的关系强度。气泡图是散点图的一个变种，是将另一个数值型变量映射给了点的大小，所以，气泡散点图需要有三个数值型变量，而颜色的透明度可以表现气泡的密集程度。
Matplotlib 散点图 绘制详解
一条菜鸟鱼的博客
11-24 2万+
目录 1 散点图 - 基础 代码 图像 2 散点图 - 点的大小 代码 图像 3 散点图 - 点的颜色 代码 图像 4 散点图 - 透明度 代码 图像 5 散点图 - 颜色条 代码 图像 6 散点图 - 多组散点 代码 图像 1 散点图 - 基础 代码 import matplotlib.pyplot as plt import numpy as np # 第一组散点 x = np.array([...
跟着 Nature 学作图 | 相关性热图（显示相关性散点图）
weixin_45822007的博客
06-19 2776
corr本期图片 ❝Jiang, Y., Sun, A., Zhao, Y. et al. Proteomics identifies new therapeutic targets of early-stage hepatocellular carcinoma. Nature 「567」, 257–261 (2019). https://doi.org/10.1038/s41586-019-09...
【gloomyfish】【原创】数据分析之 – 散点图
marraybug的博客
06-28 2788
一：什么是散点图 - What is a scatter plot 任何数据分析的第一步是图形化曲线显示数据，根据相互关系，图形曲线被称为散点图。散点图可以表示两个变量之间真实的关系强度，关系的趋势，是否存在 Outliers 二：散点图的目的是什么 ü 观察变量之间的关系，发现统计数据中是否存在问题，或者特殊值和感兴趣的数据 ü 数据是如何被离散化的 ü 通过眼睛观察是否存在 Outliers 三：示例说明 一个人的肺活量和屏住呼吸时间的研究，一个人能屏住呼吸多久，一个研究者选择一组人作为研
echarts折线图改成散点图
07-29
要将echarts折线图改成散点图，你可以按照以下步骤进行修改： 1. 首先，将代码示例中的option对象中的type属性从'line'改为'scatter'，以指定图表类型为散点图。 修改后的代码示例如下： ``` series: \[ { name:...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值