- 粒子运动: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())格式化坐标轴文本