数据可视化——力导向图的绘制

本次实验数据用的是巴黎圣母院的人物关系图

基于路径绘制力导向图代码如下：

<html><head><meta charset="UTF-8"><center><font size="8"><strong>巴黎圣母院人物关系图</strong></font></center></head><body><div style="position: absolute; bottom: 630px; right: 525px;"><font size="2"><strong>数据来源：百度</strong></font></div><script src="d3.v3.min.js"></script><script>           var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;var h=window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;w=w*0.98;h=h*0.9;var nodes=[{name:"埃斯梅拉达"},{name:"卡西莫多"},{name:"克洛德"},{name:"甘果瓦"},{name:"菲比斯"},{name:"若望"},{name:"小百合"},{name:"居第尔"}];var edges=[{source:0,target:1,relation:"爱慕"},{source:0,target:2,relation:"由爱生恨"},{source:0,target:3,relation:"名义夫妻"},{source:0,target:4,relation:"爱慕"},{source:1,target:2,relation:"养父子"},{source:1,target:4,relation:"被逮捕&逮捕"},{source:2,target:3,relation:"师生"},{source:2,target:4,relation:"情敌"},{source:2,target:5,relation:"兄弟"},{source:4,target:6,relation:"订婚"},{source:0,target:7,relation:"母女"},{source:2,target:7,relation:"上下级"}];var color=d3.scale.category20();var svg=d3.select("body").append("svg").attr("width",w).attr("height",h);var force=d3.layout.force().nodes(nodes).links(edges).size([w,h]).linkDistance(300).charge(-600).on("tick",tick).start();var path=svg.selectAll("path").data(edges).enter().append("path").attr("id",function(d,i){return "edgepath"+i;}).attr("stroke","grey");var circle=svg.selectAll("circle").data(nodes).enter().append("circle").attr("r",function(d){if(d.weight<3){return d.weight*10;}else{return d.weight*5;}}).attr("fill",function(d,i){return color(i);}).call(force.drag);var ntext=svg.selectAll("ntext").data(nodes).enter().append("text").attr("class",".ntext").attr("fill","black").attr("text-anchor","middle").attr("dy",function(d){if(d.weight<3){return d.weight*10+12;}else{return d.weight*5+12;}}).text(function(d){return d.name;}).style("font-size","14px");var etext=svg.selectAll("etext").data(edges).enter().append("text").append("textPath").attr("xlink:href",function(d,i){return "#edgepath"+i;}).attr("class",".etext").attr("startOffset","50%").attr("fill","grey").attr("text-anchor","middle").text(function(d){return d.relation;}).style("font-size","14px");function tick(){path.attr("d",function(d){return "M"+d.source.x+","+d.source.y+"L"+d.target.x+","+d.target.y;})circle.attr("transform",function(d){return "translate("+d.x+","+d.y+")";})ntext.attr("x",function(d){return d.x;}).attr("y",function(d){return d.y;});}</script></body>
</html>

基于直线绘制力导向图代码如下：

<html><head><meta charset="UTF-8"><center><font size="8"><strong>巴黎圣母院人物关系图</strong></font></center><style>path{fill: none;stroke: #666;stroke-width: 1.5px;}circle {stroke: #333;stroke-width: 1.5px;}text {font: 10px sans-serif;pointer-events: none;}.tooltip{  position: absolute;  width: 240px;  height: auto;  font-family: simsun;  font-size: 12px;text-align: left;  color: black;  border-width: 1px solid black;  background-color: A9A9A9;  border-radius: 3px;  }  .tooltip:after{   content: '';  position: absolute;  bottom: 100%;  left: 20%;  margin-left: -3px;  width: 0;  height: 0;  border-bottom: 12px solid rgb(182, 174, 174);  border-right: 12px solid transparent;  border-left: 12px solid transparent;  }  </style> </head><body><div style="position: absolute; bottom: 630px; right: 525px;"><font size="2"><strong>数据来源：百度</strong></font></div><script src="d3.v3.min.js"></script><script>           var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;var h=window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;w=w*0.98;h=h*0.9;var nodes=[{name:"埃斯梅拉达",intro:"埃斯梅拉达是雨果笔下集真、善、美于一体的完美的艺术形象。她在小时候被吉普赛人从妓女母亲的呵护下偷走，流浪街头以卖艺为生，虽然饱尝人世的艰辛与苦难，但是却始终保持着一颗善良纯真、乐于助人的心。她是美丽善良的，当乞丐国王要绞死甘果瓦时，她承诺要与甘果瓦结婚救下了他的命；当卡西莫多接受刑法口渴难耐时，只有她站出来以德报怨为他送水。她是勇敢执着的，当克洛德威胁她，只要接受他的爱就能够获得自由时，她斩钉截铁地拒绝了；当菲比斯不顾她的安危死活时，却依然痴心执着的爱着他。"},{name:"卡西莫多",intro:"卡西莫多是一个有着几何形的脸，四面体的鼻子，马蹄形的嘴，参差不齐的牙齿，独眼，耳聋，驼背，难听而忠厚的声音的畸形儿。他幼时被父母遗弃在巴黎圣母院门口，后被克洛德收养，成为敲钟人。为报恩，他对克洛德言听计从，绑架了埃斯梅拉达。但在遇到埃斯梅拉达之后，他真诚善良、忠实勇敢的本性被复活了。他奋不顾身地去救处于危险中的埃斯梅拉达，并且不图任何回报。"},{name:"克洛德",intro:"克洛德从小接受了良好的宗教教育，是一个勤奋好学、积极向上、知识渊博的青年，他收养丑陋的卡西莫多、照顾年少的弟弟，是有些许善良的。在成为巴黎圣母院的副主教遇到美丽的埃斯梅拉达后，克洛德真实的人性开始表现出来，内心强烈的占有欲迫使他去跟踪、绑架、强抢埃斯梅拉达，这并不是真正意义上的爱情，只是人性中的贪婪和欲望而已。他对埃斯梅拉达的占有欲已经超越了教会思想的束缚，不顾任何人的想法采用极端的做法只能造成悲剧的结局。"},{name:"甘果瓦",intro:"流浪诗人，曾因误闯乞丐王国要被绞死，行刑前被埃斯梅拉达以名义婚姻的形式救下。长时间的流浪使他更清楚地认识这个时代和社会，在爱情和物质面前更倾向于选择实际的物质。"},{name:"菲比斯",intro:"菲比斯表面上是一个英俊潇洒、美好的皇家卫队队长，深受女孩子的欢迎和喜爱，但是内在却是一个口蜜腹剑、风流成性的伪君子。一方面，菲比斯并不爱他的表妹，却因为表妹的丰厚嫁妆和贵族地位，而同意和表妹结婚，这是一个将金钱、地位摆在第一位的人；另一方面，他虚伪地爱着埃斯梅拉达，因其美丽的外表才一时兴起去追求。单纯的埃斯梅拉达却死心塌地爱上了这个男子，当克洛德因嫉妒袭击菲比斯时，他侥幸逃脱一劫，埃斯梅拉达却冤死在了绞刑架上。"},{name:"若望",intro:"巴黎圣母院副主教克洛德之弟，一个游戏人生的小混混，后不满哥哥的所作所为，加入“圣母院”暴动队伍，死于伽西莫多之手。"},{name:"小百合",intro:"菲比斯的原未婚妻，最终和甘果瓦成婚。"},{name:"居第尔",intro:"埃斯梅拉达的母亲。她在监狱里认出了自己的女儿，在得知分散15年后刚刚找回的骨肉马上就要被吊死了后发狂一样地保护女儿,最后死在女儿的绞架下。"}];var edges=[{source:0,target:1,relation:"爱慕"},{source:0,target:2,relation:"由爱生恨"},{source:0,target:3,relation:"名义夫妻"},{source:0,target:4,relation:"爱慕"},{source:1,target:2,relation:"养父子"},{source:1,target:4,relation:"被逮捕&逮捕"},{source:2,target:3,relation:"师生"},{source:2,target:4,relation:"情敌"},{source:2,target:5,relation:"兄弟"},{source:4,target:6,relation:"订婚"},{source:0,target:7,relation:"母女"},{source:2,target:7,relation:"上下级"},{source:3,target:6,relation:"夫妻"}];var color=d3.scale.category20();var force=d3.layout.force().charge(-600).linkDistance(300).size([w,h]);var svg=d3.select("body").append("svg").attr("width",w).attr("height",h);force.nodes(nodes).links(edges).start();var tooltip=d3.selectAll("body")  .append("div")  .attr("class","tooltip")  .style("opacity",0.0); var link=svg.selectAll().data(edges).enter().append("line").attr("class","link").style("stroke-width",1).style("stroke","grey").style("opacity",0.4);var node=svg.selectAll(".node").data(nodes).enter().append("circle").attr("class","node").attr("r",function(d){if(d.weight<3){return d.weight*10;}else{return d.weight*5;}}).attr("cx",100).attr("cy",100).style("fill",function(d,i){return color(i);}).on("mouseover",function(d,i){    //加入提示框tooltip.html("角色简介："+d.intro).style("left",(d3.event.pageX)+"px")  .style("top",(d3.event.pageY+20)+"px")  .style("opacity",1.0);}).on("mousemove",function(d){            tooltip.style("left",(d3.event.pageX)+"px")  .style("top",(d3.event.pageY+20)+"px"); })           .on("mouseout",function(d){  tooltip.style("opacity",0.0); }).call(force.drag);var text=svg.selectAll(".forcetxt").data(nodes).enter().append("text").attr("class","forcetxt").attr("text-anchor","middle").attr("x",function(d){return d.x;}).attr("y",function(d){return d.y;}).attr("dy",function(d){if(d.weight<3){return d.weight*10+12;}else{return d.weight*5+12;}}).text(function(d){return d.name;}).style("font-size","14px");var edges_text=svg.selectAll(".linetext").data(edges).enter().append("text").attr("class","linetext").attr("fill","grey")  .attr("x",100).attr("y",200).text(function(d){return d.relation;}).style("font-size","14px");force.on("tick",function(){node.attr("cx",function(d){return d.x;}).attr("cy",function(d){return d.y;});link.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;});text.attr("x",function(d){return d.x;}).attr("y",function(d){return d.y;});edges_text.attr("x",function(d){ return (d.source.x + d.target.x) / 2 ; }).attr("y",function(d){ return (d.source.y + d.target.y) / 2 ; });})</script></body>
</html>

效果如下：

forcecpath

数据可视化——力导向图的绘制相关推荐

在html中添加力导向图,echart力导向图的绘制
import echarts from 'echarts'; export default { props: { value: String }, data () { return { list1: ...
数据可视化—D3力导向图—如何实现结点与其连线的交互
文章目录前言 1.编写目的 2.编码工具一.如何实现 1. 结点交互连线变粗 2. 文本自动换行 3. 背景图片设置透明度二.实现效果三.完整代码 1.用到的数据: 2.实现代码: 总结前言 ...
D3 v3版本绘制力导向图更新节点时JS控制台报错：Error: circle attribute cx: Expected length, NaN解决办法
D3的v3版本,很古老了. 拿来绘制力导向图,画布初始化的代码如下: //代码不完整,仅作演示以说明问题 //节点数组var nodes = [ { name: "sssss" , ...
利用D3.js快速绘制力导向图
碎碎念: 最近课题需要基于图论和力导向图可视化每个脑电通道之间的连接性,MATLAB画的效果差强人意,于是上网搜寻到JavaScript 的一个函数库--D3.js,想快速得到数据的可视化结果简介D ...
Vue+D3 绘制条形图和力导向图
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 Vue+D3 绘制条形图和力导向图准备:D3代码 1.条形图 2.力导向图本篇blog在于把已经编写好的D3代码从一般HTML文件 ...
数据可视化——R语言ggplot2包绘制相关矩阵为热图
数据可视化--R语言ggplot2包绘制相关矩阵为热图概述:R语言软件和数据可视化--ggplot2快速绘制相关矩阵为热图.本文翻译了一篇英文博客,博客原文链接:http://www.sthda.c ...
数据可视化——R语言ggplot2包绘制精美的小提琴图(并箱线图或误差条图组合)
数据可视化--R语言ggplot2包绘制精美的小提琴图(并箱线图或误差条图组合) 概述:R语言使用ggplot2工具包绘制小提琴图.为了使数据表达更加丰富,同时将小提琴图与箱线图和误差条图相结合.另外 ...
matlab半小提琴图,数据可视化——Matlab平台matlab-barplot工具箱绘制小提琴图
数据可视化--Matlab平台matlab-barplot工具箱绘制小提琴图概述:基于matlab平台的matlab-barplot工具箱绘制小提琴图小提琴图(violin plot)可以理解为另 ...
D3.js系列——布局：饼状图和力导向图
一.饼状图在布局的应用中,最简单的就是饼状图. 1.数据有如下数据,需要可视化: var dataset = [ 30 , 10 , 43 , 55 , 13 ]; 这样的值是不能直接绘图的.例如 ...

数据可视化——力导向图的绘制

本次实验数据用的是巴黎圣母院的人物关系图

数据可视化——力导向图的绘制相关推荐

最新文章

热门文章