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

最新推荐文章于 2021-10-17 14:19:10 发布
最新推荐文章于 2021-10-17 14:19:10 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： d3.js

1、一般的散点绘制

用二维数组表示每个点的坐标

//Width and height
 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]
 ];
  
 //Create SVG element
 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、点的大小

控制半径

.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、源码

[html] view plain copy print ?
  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head>  
  4.         <meta charset="utf-8">  
  5.         <title>testD3-9-drawScatterLot.html</title>  
  6.         <script type="text/javascript" src="http://localhost:8080/spring/js/d3.v3.js"></script>  
  7.     <style type="text/css">  
  8.         </style>  
  9.     </head>  
  10.     <body>  
  11.         <script type="text/javascript">  
  12. //Width and height  
  13.             var w = 500;  
  14.             var h = 100;  
  15.               
  16.             var dataset = [  
  17.                             [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],  
  18.                             [410, 12], [475, 44], [25, 67], [85, 21], [220, 88]  
  19.                           ];  
  20.       
  21.             //Create SVG element  
  22.             var svg = d3.select("body")  
  23.                         .append("svg")  
  24.                         .attr("width", w)  
  25.                         .attr("height", h);  
  26.   
  27.             svg.selectAll("circle")  
  28.                .data(dataset)  
  29.                .enter()  
  30.                .append("circle")  
  31.                .attr("cx", function(d) {  
  32.                     return d[0];  
  33.                })  
  34.                .attr("cy", function(d) {  
  35.                     return d[1];  
  36.                })  
  37.                .attr("r", function(d) {  
  38.                     return Math.sqrt(h - d[1]);  
  39.                });  
  40.   
  41.             svg.selectAll("text")  
  42.                .data(dataset)  
  43.                .enter()  
  44.                .append("text")  
  45.                .text(function(d) {  
  46.                     return d[0] + "," + d[1];  
  47.                })  
  48.                .attr("x", function(d) {  
  49.                     return d[0];  
  50.                })  
  51.                .attr("y", function(d) {  
  52.                     return d[1];  
  53.                })  
  54.                .attr("font-family", "sans-serif")  
  55.                .attr("font-size", "11px")  
  56.                .attr("fill", "red");  
  57.         </script>  
  58.   
  59.     </body>  
  60. </html>  
<!DOCTYPE html>
<html>
  <head>
		<meta charset="utf-8">
		<title>testD3-9-drawScatterLot.html</title>
		<script type="text/javascript" src="http://localhost:8080/spring/js/d3.v3.js"></script>
	<style type="text/css">
		</style>
	</head>
	<body>
		<script type="text/javascript">
//Width and height
			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]
						  ];
	
			//Create SVG element
			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、效果

Harry_Burt
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
D3__散点图
跟自己比，不要跟别人比
03-30 1017
&lt;script type="text/javascript"&gt; dataset=[]; for (i=0;i&lt;50;i++){ x=Math.round(Math.random()*1000); y=Math.round(Math.random()*1000); dataset.push([x,y]); } var formator=d3.format("...
JavaScript 3D 散点图
ArctionLtd的博客
03-29 1318
3D 散点图
【D3.js数据可视化系列教程】--（十一）散点图
热门推荐
司机大傻
09-08 1万+
散点图
d3 绘制散点图
weixin_30265171的博客
04-05 273
之前看了angularjs，又看了看d3 on angularjs这本书，本来打算使用angularjs，结果把npm玩坏了，现在都没修好，只好先单独用d3绘制了。 先贴代码： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8">...
d3 散点图
give it a try
10-17 258
下定决心好好过一天 这里我的d3是v7版本，框架使用的是vue框架。可以只看methods中写的代码即可 源代码 <template> <div id="ScatterChartsD3" width="600" height="600"> </div> </template> <script> import * as d3 from "d3" export default { name:"ScatterChartsD3", .
精通D3.js：交互式数据可视化高级编程1
08-03
《精通D3.js：交互式数据可视化高级编程1》是一本深入探讨D3.js库的指南，旨在帮助读者掌握创建动态、交互式数据可视化的技能。D3.js，全称Data-Driven Documents，是一个强大的JavaScript库，专为数据驱动的Web文档...
精通D3.js交互式数据可视化高级编程
11-02
### 精通D3.js交互式数据可视化高级编程 #### 一、基础知识篇 **1.1 D3.js简介** D3.js（Data-Driven Documents）是一种用于创建交互式数据可视化的JavaScript库。它利用HTML、SVG和CSS来显示和操作数据。D3.js的...
《Web数据可视化》-教学大纲.pdf
04-04
课程的主要任务是让学生理解数据可视化的概念、方法和流程，通过学习ECharts这个流行的JavaScript数据可视化库，使学生能够熟练制作各种图表，并结合实际问题进行应用。课程内容覆盖了ECharts的基础到高级使用，以及...
D3.js自学推荐的两本书（精通D3.js交互式数据可视化高级编程，d3.js数据可视化实践）
03-26
D3.js，全称Data-Driven Documents，是由Mike Bostock开发的一款强大的JavaScript库，用于创建数据驱动的文档。这个库允许开发者通过HTML、SVG和CSS来操作数据，实现复杂的数据可视化。对于想要深入学习D3.js的人来...
数据可视化技术应用-XY散点图有实操.pptx
最新发布
02-16
XY散点图，也被称为气泡图，是数据可视化中的一种常见图表类型，尤其适用于揭示两个变量之间的关系。在这个场景下，X轴代表一个变量，Y轴代表另一个变量，而每个点的位置则对应数据集中的一条记录，点的位置决定了这...
d3-Scatterplot-Graph-fcc:FreeCodeCamp d3散点图
04-13
d3-散点图-fcc FreeCodeCamp d3散点图
lightning-scatter-3:基于Three.js的散点图
05-10
闪电散射3 三维散点图闪电 文档和示例
D3.js实现散点图和气泡图的方法详解
10-21
将会给大家介绍了另外两种可视化图表，利用D3.js实现散点图和气泡图，文章通过多个方面介绍的非常详细，下面来一起看看吧。
three_d:交互式3D散点图和曲面图
05-03
three_d 我不了解git，不太可能在这里活跃，但是可以随意进行分叉，执行任何操作，将变量名更改为驼峰大小写等。文档和示例在
D3——散点图Scatterplot
weixin_30484247的博客
09-15 381
散点图 //Width and height var w = 500; var h = 100; var barPadding = 3; var dataset = [ [5, 20], [480, 90], [250, 50], [100, 33], [330, 95], [410, 12], [475, 44], [25, ...
D3 - 绘制散点图
No cost too great!
03-17 560
D3绘制散点图 效果图 数据来自：https://www.worldbank.org/ 完整代码（不含Initialize初始化数据的函数）： <script src="https://d3js.org/d3.v5.js"></script> <script> let w = window.innerWidth || document.documen...
D3---绘制散点图
qq_39579290的博客
07-10 2124
一：实现效果 如以上视图显示，分别实现散点图和三个按钮的功能。 二：思路 1.添加画布（画图形一般首要的就是添加画布）。 2.添加合适的比例尺。 3.添加圆。 4.添加坐标轴。 5.添加三个按钮并实现相应的功能。 三：代码分析 1.添加画布。 <script> var wwidth=400; var hheight=400; ...
js image 获取rgb_ECharts 3d散点图 绘制rgb颜色空间
weixin_39997194的博客
11-29 285
最近可能会用ECharts做图表, 看到3d点图这个功能想到之前用python做的东西, 绘制rgb颜色空间, 不过由于python的性能实在有点不敢恭维, 效果比较差, 于是想着用ECharts试试.效果如下:点击体验: rgb 颜色空间rgb颜色空间可视化https://www.zhihu.com/video/1137820192334786560效果比起python那种肉眼可见的延迟简直流畅...
d3.js学习笔记（三）------散点图（添加了数轴）
MARTIAN的博客
02-03 461
添加了数轴的散点图 要点： 1、定义数轴时是用 d3.axisBottom()、 d3.axisLeft() 2、数轴是要基于比例尺工作，所以必须调用 .scale(比例尺) 3、ticks() 是用来定义刻度线的数量，但只是粗略设置刻度线的数量，d3 会更精确的确定具体采用几根刻度线 4、svg.append(“g”) g是分组元素：1）为组织其他元素；2）对整个分组应用变换，从而影响该组中所有元素 5、添加数轴，必须调用定义的数轴函数 具体代码如下： <!DOCTYPE html> <
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值