力导向算法

也称为弹簧算法，基于物理系统的引力斥力模型为图上的node和edge布局，用于解决重叠问题。

应用：

网络、层级、气泡、蜂房、布匹

绘制过程：

数据（node/edge表示图或网络）-->d3.layout.force()计算节点的位置-->绘制节点（circle/rect）-->绘制边(line/path)

基本原理：

代码：

<html><head><meta charset="utf-8"><title>一个简单的力引导案例</title><style>.node {stroke: #fff;stroke-width: 1.5px;}.link {stroke: #999;stroke-opacity: .6;}</style></head><body><script src="d3.v3.min.js"></script><script>var width=(window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth)*0.98;var height=(window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight)*0.9;var color = d3.scale.category20();var force = d3.layout.force()      //创建为力引导布局.charge(-120).linkDistance(200).size([width, height]);var svg = d3.select("body").append("svg")   //添加svg绘图区.attr("width", width).attr("height", height);d3.json("a.json", function(error, graph) {console.log(graph);                  force.nodes(graph.nodes)             //绑定图的节点和数据.links(graph.links).start();var node = svg.selectAll(".node")    //绘制圆形表示节点.data(graph.nodes).enter().append("circle").attr("class", "node").attr("r", 16).style("fill", function(d) { return color(d.group); }).call(force.drag);var link = svg.selectAll(".link")       //绘制直线表示边.data(graph.links).enter().append("line").attr("class", "link").style("stroke-width", function(d) { return Math.sqrt(d.value); });force.on("tick", function() {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; });node.attr("cx", function(d) { return d.x; }).attr("cy", function(d) { return d.y; });});});</script></body>
</html>

节点相关参数：

[D3]

	参数	特点	代码
基本配置参数	d3.layout.force()
节点相关参数	force.node([nodes])
	force.size([width,height])
	force.friction([])
	force.charge([])
	force.chargeDistance([])
	force.gravity([])
	force.theta([])
连线相关参数	force.links([])
	force.linkDistance([])
	force.linkStrength([])
动画相关参数	force.alpha([])
	force.start()
	force.stop()
	force.tick()
交互相关参数	force.drag()	与call一起使用	node.call(force.drag)

综合案例：

人物社会关系图（代码来源：《数据可视化原理与实例》）


<html>    <head>      <title>《人名的名义》人物关系</title><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: 10px;text-align: left;  color: black;  border-width: 1px solid black;  background-color: 7FFF00;  border-radius: 3px;  }  .tooltip:after{   content: '';  position: absolute;  bottom: 100%;  left: 20%;  margin-left: -3px;  width: 0;  height: 0;  border-bottom: 12px solid black;  border-right: 12px solid transparent;  border-left: 12px solid transparent;  }  </style>  </head>   <body style=" opacity:1"> <script src="d3.v3.min.js" charset="utf-8" ></script>  <script type="text/javascript">  var  width=(window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth)*0.98;var  height=(window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight)*0.9;var  img_h=50;var  img_w=50;var  radius=10;var svg=d3.select("body")  .append("svg")  .attr("width",width)  .attr("height",height);   var nodes=[{name:"侯亮平",image:"hlp.jpg",intro:"侯亮平是最高检反贪局侦查处处长，汉东省人民检察院副检察长兼反贪局局长。经过与腐败违法分子的斗争，最终将一批腐败分子送上了审判台，正义战胜邪恶，自己也迎来了成长。"},{name:"高育良",image:"gyl.jpg",intro:"高育良是汉东省省委副书记兼政法委书记。年近六十，是一个擅长太极功夫的官场老手。侯亮平、陈海和祁同伟都是其学生。"},{name:"祁同伟",image:"qtw.jpg",intro:"祈同伟是汉东省公安厅厅长。出身农民，曾想凭自己的努力走上去，内心渴望成为一个胜天半子的人，但现实却沉重地打击了他，进而走上了不归路"},{name:"陈海",image:"ch.jpg",intro:"陈海是汉东省人民检察院反贪局局长。他不畏强权、裁决果断，一出场就与汉东官场权利正面交锋；他廉明正直、重情重义，与好兄弟侯亮平携手战斗在反腐第一线，他遭遇暗害惨出车祸而躺在医院。"},{name:"蔡成功",image:"ccg.jpg",intro:"蔡成功是汉东省大风厂董事长、法人代表，为人狡诈，为了招标成功而贿赂政府官员，甚至连发小反贪局局长侯亮平也企图想去贿赂。"},{name:"高小琴",image:"gxq.jpg",intro:"高小琴是山水集团董事长，也是一位叱咤于政界和商界的风云人物，处事圆滑、精明干练。在与官员沟通时更是辩口利辞，沉稳大气，拥有高智商和高情商，并得到以“猴精”著称的反贪局长侯亮平冠以“美女蛇”的称号。"},{name:"高小凤",image:"gxf.jpg",intro:"高小凤是高小琴的孪生妹妹，高育良的情妇。"},{name:"陆亦可",image:"lyk.jpg",intro:"陆亦可是汉东省检察院反贪局的女检查官，表面冷峻决绝，内心重情重义。大龄未嫁的她面临着家庭逼婚的困境，而她抗婚是因为对反贪局长陈海一往情深。然而陈海惨遭横祸，她收起悲愤去探求真相拨云见雾，同时在公安局长赵东来的追求中获得真爱。"},{name:"赵东来",image:"zdl.jpg",intro:"赵东来是汉东省京州市公安局局长。看似直来直去，但却深谋远虑，智勇双全。为了保护正义的尊严，报着坚决整治恶势力的决心，在与检察部门的合作中从最初的质疑到之后的通力配合，展现出现代执法机构的反腐决心。"},{name:"陈岩石",image:"cys.jpg",intro:"陈岩石是离休干部、汉东省检察院前常务副检察长。充满正义，平凡而普通的共产党人。对大老虎赵立春，以各种形式执着举报了十二年。在这场关系党和国家生死存亡的斗争中，老人家以耄耋高龄，义无反顾"},{name:"李达康",image:"ldk.jpg",intro:"李达康是汉东省省委常委，京州市市委书记，是一个正义无私的好官。但为人过于爱惜自己的羽毛，对待身边的亲人和朋友显得过于无情"},{name:"沙瑞金",image:"srj.jpg",intro:"沙瑞金是汉东省省委书记。刚至汉东便发生丁义珍出逃美国事件，又遇到大风厂案。深知汉东政治情况的沙瑞金支持侯亮平查案，要求他上不封顶。"},{name:"欧阳菁",image:"oyj.jpg",intro:"欧阳菁是汉东省京州市城市银行副行长，京州市市委书记李达康的妻子，后因感情不和离婚。她曾利用职务的便利贪赃枉法。"},{name:"丁义珍",image:"dyz.jpg",intro:"丁义珍英文名汤姆丁。汉东省京州市副市长兼光明区区委书记。贪污腐败，逃往国外。"},{name:"季昌明",image:"jcm.jpg",intro:"季昌明是汉东省省级检察院检察长。清廉负责，为人正直，性格温和，但也有些拘泥于教条。对初到汉东省的侯亮平提供了极大地帮助，为破解案件起到了极大地作用。"},{name:"钟小艾",image:"zxa.jpg",intro:"钟小艾是侯亮平的妻子，中纪委调查组的委派员。"},{name:"赵瑞龙",image:"zrl.jpg",intro:"赵瑞龙是副国级人物赵立春的公子哥，官二代，打着老子的旗子，黑白两道通吃，权倾一时。把汉东省搅得天翻地覆。"}];var edges=[{source:0,target:1,relation:"师生"},{source:0,target:2,relation:"同门"},{source:0,target:3,relation:"同学&挚友"},{source:0,target:4,relation:"发小"},{source:0,target:7,relation:"同事"}, {source:0,target:15,relation:"夫妻"}, {source:14,target:0,relation:"上下级"},{source:1,target:2,relation:"师生"},{source:1,target:3,relation:"师生"}, {source:1,target:6,relation:"情人"}, {source:1,target:11,relation:"上下级"},{source:1,target:10,relation:"政敌"},{source:2,target:5,relation:"情人"}, {source:2,target:3,relation:"同门&陷害"},  {source:2,target:11,relation:"上下级"},{source:3,target:9,relation:"父子"},{source:4,target:5,relation:"商业对手"},{source:5,target:6,relation:"孪生姐妹"}, {source:8,target:11,relation:"上下级"},{source:9,target:11,relation:"故交"},{source:10,target:11,relation:"上下级"},{source:10,target:12,relation:"夫妻"},{source:13,target:10,relation:"上下级"},{source:12,target:4,relation:"受贿关系"},{source:16,target:2,relation:"利益关系"},{source:16,target:5,relation:"利益关系"}];var force=d3.layout.force().nodes(nodes).links(edges).size([width,height]).linkDistance(150).charge(-1200).start(); //提示框部分var tooltip=d3.selectAll("body")  .append("div")  .attr("class","tooltip")  .style("opacity",0.0); //箭头绘制 var defs = svg.append("defs");var radius=10;var arrowMarker = defs.append("marker").attr("id","arrow").attr("markerUnits","strokeWidth").attr("markerWidth","4").attr("markerHeight","4").attr("viewBox","0 0 4 4").attr("refX",20+radius/8-2)   //实际是radius/strokeWidth.attr("refY",2).attr("orient","auto");var arrow_path = "M0,1 L4,2 L0,3 L0,0";arrowMarker.append("path").attr("d",arrow_path);          var color=d3.scale.category20();var path = svg.selectAll("path").data(edges).enter().append("path").attr("id", function(d,i) {return "edgepath" +i;}).attr("class","edges").attr("marker-end","url(#arrow)");    var pathtext = svg.selectAll('.pathText').data(edges).enter().append("text").attr("class","pathText").append('textPath').attr("text-anchor", "middle")//居中.attr("startOffset","50%").attr('xlink:href', function(d,i) { return "#edgepath" + i; }).text(function(d) { return d.relation; });              var  img_h=50;var  img_w=50;var  radius=23;               var  circles=svg.selectAll("forceCircle").data(nodes).enter().append("circle").attr("class","forceCircle").attr("r",radius).style("stroke","DarkGray").style("stroke-width","1.0px").attr("fill", function(d, i){//创建圆形图片var defs = svg.append("defs").attr("id", "imgdefs");var catpattern = defs.append("pattern").attr("id", "catpattern" + i).attr("height", 1).attr("width", 1);catpattern.append("image").attr("x", - (img_w / 2 - radius+5.8)).attr("y", - (img_h / 2 - radius+3.5)).attr("width", img_w+11).attr("height", img_h+6).attr("xlink:href","image/"+d.image);return "url(#catpattern" + 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 texts=svg.selectAll(".forceText").data(nodes).enter().append("text").attr("class","forceText").attr("x",function(d){return d.x;}).attr("y",function(d){return d.y;}).style("stroke", "#336666").attr("dx","-1.5em").attr("dy","3em").text(function(d){return d.name;});force.on("tick",function(){path.attr("d", function(d) {var dx = d.target.x - d.source.x;//增量var dy = d.target.y - d.source.y;return "M" + d.source.x + ","+ d.source.y + "L" + d.target.x + "," + d.target.y;});circles.attr("cx",function(d){return d.x;});circles.attr("cy",function(d){return d.y;});texts.attr("x",function(d){return d.x;});texts.attr("y",function(d){return d.y;});});</script></body>
</html>

a.json

{"nodes":[   {"name":"@","group":0},{"name":"a","group":1},{"name":"b","group":2}],
"links":[{"source":0,"target":1,"value":1},{"source":1,"target":2,"value":1},{"source":2,"target":0,"value":1}]
}

参考文献：

李春芳石民勇数据可视化原理与实例中国传媒大学出版社

D3临摹_力引导算法(西安交大国家艺术基金数据可视化培训第23天)相关推荐

D3临摹作业_分词与词云可视化(西安交大国家艺术基金数据可视化培训第28天)
第十二章分词与词云可视化第一节词云图概念:一种富文本信息可视化技术,通过布局算法用文字大小表示词频,辅以多种颜色,直观的反映词组重要性差异,展示文本关键摘要信息.完整的词云分析包括:分词.词 ...
D3临摹作业_数据采集(西安交大国家艺术基金数据可视化培训第27天)
第十一章数据可视化之数据采集第一节 python爬虫基础一 .爬虫概述 URL由三部分构成:协议://用户名:密码@子域名.域名.顶级域名:端口号/目录/文件名.文件后缀?参数=值#标志二. ...
计算新闻传播学临摹作业_数据抓取与数据清洗(西安交大国家艺术基金数据可视化培训第34天)
一基于字典的情感分析 1 Jieba中文分词算法设计[邓旭东] 第一步:读取评论数据,对评论进行分句. 第二步:查找对分句的情感词,记录积极还是消极,以及位置. 第三步:往情感词前查找程度词,找到 ...
智图临摹作业(西安交大国家艺术基金数据可视化培训第22天)
案例1:01esri用户大会素材:数据.图片(banner) 在media加载地图,使用流向图,然后添加数据作品:链接案例2:天津塘沽爆炸数据素材:数据.图片(移动端封面) 在media加载地 ...
iArtist临摹作业(西安交大国家艺术基金数据可视化培训第11天)
今天,来自北京艾迪普公司的吴春一老师和许立老师给我们分享了面向新闻专业的三维软件--iArtist,来自动画与艺术教育专委会会员群的中国传媒大学张歌东老师给我分享了艾迪普的公众号.老师们主要介绍了艾迪 ...
力引导算法深入理解及其在d3.js中实现的源码分析
中学时最喜欢的学科是物理,大学误打误撞读了计算机.最近在做图计算的相关工作,图的可视化中有一个非常重要的算法:"力引导算法",这个算法的原理居然就是最简单的粒子间的作用力,真是没想 ...
d3关联关系图力引导图，支持多条线，带箭头。
代码链接:https://download.csdn.net/download/qq_42080160/11453702最实用d3关联关系力引导图,只需要引用一个js,向页面传一个josn串:写了非常 ...
数据图表与分析图_史上最全最实用的数据可视化分析图表制作工具汇总
俗话说的好:工欲善其事,必先利其器!一款好的工具可以让你事半功倍,尤其是在大数据时代,更需要强有力的工具通过使数据有意义的方式实现数据可视化,还有数据的可交互性;我们还需要跨学科的团队,而不是单个数据 ...
python人机交互界面设计_[译]学习IPython进行交互式计算和数据可视化（五）
第四章:交互式绘图接口本章我们将展示Python的绘图功能以及如何在IPython中交互式地使用它们. NumPy为处理大量的多维数组结构的数据提供了高效的方法.但是看行行列列的数字总不如直接看曲线 ...

D3临摹_力引导算法(西安交大国家艺术基金数据可视化培训第23天)