D3.js的v5版本入门教程(第十四章)—— 力导向图

D3.js的v5版本入门教程(第十四章)

    

    这一章我们来绘制一个力导向图,什么叫力导向图,通俗一点将就是有节点和线组成,当鼠标拖拽一个节点时,其他节点都会受到影响(力导向图有多种类型,本章绘制的效果就是这样,其他类型的读者可以自己去试试),还是给读者提个醒,这一章又会有很多新的知识点,请拿出的学习新东西的本领来

    为了绘制一个力导向图,我们还是需要以下新的知识点

  • d3.forceSimulation() ,新建一个力导向图,
  • d3.forceSimulation().force(),添加或者移除一个力,这里给出官方示例: 

    

    这里说明一下对于d3.forceSimulation().force(name),也就是当force中只有一个参数,这个参数是某个力的名称,那么这段代码返回的是某个具体的力,(根据上面图片官方对force的说明也可以知道),例如d3.forceSimulation().force(“link”),则返回的是d3.forceLink()这个力,注意对照上面的图片,这个用法在下面会经常被用到

 

  • d3.forceSimulation().nodes(),输入是一个数组,然后将这个输入的数组进行一定的数据转换,例如添加坐标什么的!这里给出官方API的解释

    从这里可以看出,差不多就是上面作者讲的那个意思

 

  • d3.forceLink.links(),这里输入的也是一个数组(边集),然后对输入的边集进行转换,等一下我们会看到,它到底被转换成什么样子的
  • tick函数,这个函数对于力导向图来说非常重要,因为力导向图是不断运动的,每一时刻都在发生更新,所以需要不断更新节点和连线的位置
  • d3.drag(),是力导向图可以被拖动

    好了,有了这些基础知识后,我们开始绘制一个力导向图

    1、数据准备

var marge = {top:60,bottom:60,left:60,right:60}
    	var svg = d3.select("svg")
    	var width = svg.attr("width")
    	var height = svg.attr("height")
    	var g = svg.append("g")
    		.attr("transform","translate("+marge.top+","+marge.left+")");
    		
    	//准备数据
    	var nodes = [//节点集
    		{name:"湖南邵阳"},
    		{name:"山东莱州"},
    		{name:"广东阳江"},
    		{name:"山东枣庄"},
    		{name:"泽"},
    		{name:"恒"},
    		{name:"鑫"},
    		{name:"明山"},
    		{name:"班长"}
    	];
    	
    	var edges = [//边集
    		{source:0,target:4,relation:"籍贯",value:1.3},
    		{source:4,target:5,relation:"舍友",value:1},
    		{source:4,target:6,relation:"舍友",value:1},
    		{source:4,target:7,relation:"舍友",value:1},
    		{source:1,target:6,relation:"籍贯",value:2},
    		{source:2,target:5,relation:"籍贯",value:0.9},
    		{source:3,target:7,relation:"籍贯",value:1},
    		{source:5,target:6,relation:"同学",value:1.6},
    		{source:6,target:7,relation:"朋友",value:0.7},
    		{source:6,target:8,relation:"职责",value:2}
    	];

    2、设置一个颜色比例尺

//设置一个color的颜色比例尺,为了让不同的扇形呈现不同的颜色
    	var colorScale = d3.scaleOrdinal()
    		.domain(d3.range(nodes.length))
    		.range(d3.schemeCategory10);

    3、新建一个力导向图

var forceSimulation = d3.forceSimulation()
    		.force("link",d3.forceLink())
    		.force("charge",d3.forceManyBody())
    		.force("center",d3.forceCenter());

    其实上面那一段代码你就可以从官网上面复制下来(我也是这么干的) 

   4、生成节点数据

//生成节点数据
    	forceSimulation.nodes(nodes)
    		.on("tick",ticked);//这个函数很重要,后面给出具体实现和说明

    注意,这里出现了tick函数,我把它的实现写到了一个有名函数ticked(以前我们是不是写的都是无名函数)

    5、生成边集数据

//生成边数据
    	forceSimulation.force("link")
    		.links(edges)
    		.distance(function(d){//每一边的长度
    			return d.value*100;
    		}) 

    注意,这里出现了forceSimulation.force(name)的用法,前面已经详细解释了它的返回值

    6、设置图形中心位置

//设置图形的中心位置	
    	forceSimulation.force("center")
    		.x(width/2)
    		.y(height/2);

    这里也是forceSimulation.force(name)的用法

    7、输出顶点集和边集

//在浏览器的控制台输出
    	console.log(nodes);
    	console.log(edges);

    顶点集的样子

    

    边集的样子

    

    8、绘制边

//绘制边
    	var links = g.append("g")
    		.selectAll("line")
    		.data(edges)
    		.enter()
    		.append("line")
    		.attr("stroke",function(d,i){
    			return colorScale(i);
    		})
    		.attr("stroke-width",1);

    这里注意一下,应该先绘制边,在绘制顶点,因为在d3中,各元素是有层级关系的,先绘制的在下面

    9、边上的文字

var linksText = g.append("g")
    		.selectAll("text")
    		.data(edges)
    		.enter()
    		.append("text")
    		.text(function(d){
    			return d.relation;
    		})

    10、老规矩,先建立用来放在每个节点和对应文字的分组<g>

var gs = g.selectAll(".circleText")
    		.data(nodes)
    		.enter()
    		.append("g")
    		.attr("transform",function(d,i){
    			var cirX = d.x;
    			var cirY = d.y;
    			return "translate("+cirX+","+cirY+")";
    		})
    		.call(d3.drag()
    			.on("start",started)
    			.on("drag",dragged)
    			.on("end",ended)
    		);

    注意,这里出现了drag函数,对于call函数大家应该比较熟悉了!我们也可以发现,这里使用了三个有名函数,具体实现后面会给出

    11、节点和文字

//绘制节点
    	gs.append("circle")
    		.attr("r",10)
    		.attr("fill",function(d,i){
    			return colorScale(i);
    		})
    	//文字
    	gs.append("text")
    		.attr("x",-10)
    		.attr("y",-20)
    		.attr("dy",10)
    		.text(function(d){
    			return d.name;
    		})

    注意,这里的文字的到需要根据转换后数据的特点得到!!!

    12、ticked函数的实现

function ticked(){
    		links
    			.attr("x1",function(d){return d.source.x;})
    			.attr("y1",function(d){return d.source.y;})
    			.attr("x2",function(d){return d.target.x;})
    			.attr("y2",function(d){return d.target.y;});
    			
    		linksText
    			.attr("x",function(d){
    			return (d.source.x+d.target.x)/2;
    		})
    		.attr("y",function(d){
    			return (d.source.y+d.target.y)/2;
    		});
    			
    		gs
    			.attr("transform",function(d) { return "translate(" + d.x + "," + d.y + ")"; });
    	}

    注意,可以发现,这里写的都是位置信息,所以你在绘制相应的图形元素的时候,位置信息就不那么重要的,而且,建议先写完这个函数后,在进行测试

    13、drag

function started(d){
    		if(!d3.event.active){
    			forceSimulation.alphaTarget(0.8).restart();设置衰减系数,对节点位置移动过程的模拟,数值越高移动越快,数值范围[0,1]
    		}
    		d.fx = d.x;
    		d.fy = d.y;
    	}
    	function dragged(d){
    		d.fx = d3.event.x;
    		d.fy = d3.event.y;
    	}
    	function ended(d){
    		if(!d3.event.active){
    			forceSimulation.alphaTarget(0);
    		}
    		d.fx = null;
    		d.fy = null;
    	}

    drag中有三个函数,在这里进行了实现,其中d.fx和d.fy表示固定坐标,例如,现在我们看到dragged函数,我们可以发现这样的代码:d.fx = d3.event.x;  d.fy = d3.event.y;,也就是在拖动节点的时候,鼠标位置在哪里(d3.event),节点的固定位置就在哪里,再看到ended函数,也就是结束拖动的时候触发,可以发现,固定坐标都为空,也就是不固定,这样模拟的效果才好(你们也可以试试去掉ended函数会发生什么,这样可以更好的理解)

    最后,附上代码运行的结果

    

    效果还是很不错的!!是不是感觉过程很复杂!没关系,一步一步来,结果好就行

效果浏览:点击浏览效果

源码浏览:点击源码浏览

(效果浏览会出现乱码,请谅解!但是整体效果和上面的截图差不多,而且是动态的,可以鼠标拖拽!)

 

(翻外篇)d3.js在网页端可视化neo4j图数据库

    为了让大家更好的学习d3.js,“d3.js在网页端可视化neo4j图数据库”这是一个比较综合的项目——利用neo4j的java驱动API从neo4j中取数据,并利用d3.js在网页端进行可视化。大家在学完基础课程后可以做一下这个项目,进行巩固。点击下面链接进行查看:d3.js可视化neo4j图数据库项目专栏

 

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页