D3.js - 3

最新推荐文章于 2024-06-15 11:03:10 发布

某僧

最新推荐文章于 2024-06-15 11:03:10 发布

阅读量179

点赞数

文章标签： d3.js

本文链接：https://blog.csdn.net/weixin_45656737/article/details/110007531

版权

粒子运动：force
forceSimulation会通过每次tick更新当前节点的状态（位置、速度、加速度）
人为设置每次tick要如何更新图元：simulation.on(‘tick’,ticked);
初始化每个图元后，为simulation设置了tick回调，会自动开始模拟，simulation.stop()会停止timer的tick循环
forceManyBody：粒子之间两两的作用力，strength为正相互吸引，负相互排斥
forceCenter：指向某个中心的力，会尽可能让粒子向中心靠近或重合。
forceLink：让相互之间有链接的节点保持某一个特定的距离
forceManyBody和forceLink中的 | strength | 数值越大，粒子越靠近中心。

<html>    
	<head>        
		<script src="https://d3js.org/d3.v5.min.js"></script>    
	</head>    
	<body>        
		<!--svg的id是mainsvg-->        
		<svg width="800" height = '600' id='mainsvg' class = 'svgs'></svg>        
		<script>            
			const margin ={top:20,left:60,bottom:60,right:60};            
			//通过svg进行选择            
			const svg = d3.select('svg');           
			const g = svg.append('g')            
			.attr('id','maingroup')            
			.attr('transform','translate('+margin.left+','+margin.top+')');            
			const width = +svg.attr('width');            
			const height = +svg.attr('height');            
			const innerheight = height-margin.top-margin.bottom;            
			const innerwidth = width - margin.left-margin.right;                        
			render_init=function(){                
				lines = g.selectAll('line').data(links).join('line')                
				.attr('stroke','blue')                
				.attr('stroke-width',0.5)                
				.attr('opacity',0.8);                
				circle = g.selectAll('circle').data(nodes).join('circle')                
				.attr('r',6)                
				.attr('fill','black');            
			}           
			const ticked = function(){                
				lines                
				.attr('x1',d=>d.source.x)                
				.attr('y1',d=>d.source.y)                
				.attr('x2',d=>d.target.x)                
				.attr('y2',d=>d.target.y);
				                
				circle                
				.attr('cx',d=>d.x)                
				.attr('cy',d=>d.y);            
			}
				            
			d3.json('data/socfb-caltech36.json').then(data =>{                    
				links=data.links;                    
				nodes=[];                    
				for(let i =0;i<data['#nodes'];i++){                        
					nodes.push({'index':i});                    
				}                    
				console.log(nodes);                    
				render_init();                    
				simulation = d3.forceSimulation(nodes)      
				//添加三个力              
				.force('manybody',d3.forceManyBody().strength(-30))                    
				.force('center',d3.forceCenter(width/2,height/2))                    
				.force('link',d3.forceLink(links).strength(0.1).distance(20))                    
				.on('tick',ticked)//全自动开始模拟                
			}
        		</script>    
        	</body>
 </html>

渐变
线性梯度
从中心向外扩散的梯度，同svg

<linearGradient id = 'linearGrad'>
	<stop offset = '0%' stop-color = '#8dd3c7' stop-opcity ='1'></stop>
	<stop offset = '100%' stop-color = '#ffffb3' stop-opcity ='1'></stop>
</linearGradient>
<svg width='200' height = '200'>
	<circle cx = '100' cy = '100' r='50' fill = 'url(#linearGrad)'/>
</scg>

path+stack实现主题河流
format，数字格式化；
d3.format(’.2f’)(num),小数点后保留两位
d3.format(’.2r’)(num)，四舍五入保留两位可以参考的数字
d3.format(’.2s’)(num)，只保留三位有效数字
.tickFormat(d3.format())格式化坐标轴文本

某僧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
D3.js - 3

粒子运动：forceforceSimulation会通过每次tick更新当前节点的状态（位置、速度、加速度）人为设置每次tick要如何更新图元：simulation.on(‘tick’,ticked);初始化每个图元后，为simulation设置了tick回调，会自动开始模拟，simulation.stop()会停止timer的tick循环forceManyBody：粒子之间两两的作用力，strength为正相互吸引，负相互排斥forceCenter：指向某个中心的力，会尽可能让粒子向中心靠近或.
复制链接

扫一扫