D3实战(1):力导向图

一，D3简介

近年来，可视化越来越流行，许多报刊杂志、门户网站、新闻媒体都大量使用可视化技术，使得复杂的数据和文字变得十分容易理解，有一句谚语“一张图片价值于一千个字”。D3 正是数据可视化工具中的佼佼者，基于 JavaScript 开发，项目托管于 GitHub。从 D3诞生以来，不断受到好评，在 GitHub 上的项目仓库排行榜也不断上升。可视化越来越流行，许多报刊杂志、门户网站、新闻、媒体都大量使用可视化技术，使得复杂的数据和文字变得十分容易理解，有一句谚语“一张图片价值于一千个字”，的确是名副其实。各种数据可视化工具也如井喷式地发展，D3 正是其中的佼佼者。D3 的全称是（Data-Driven Documents），顾名思义可以知道是一个被数据驱动的文档。听名字有点抽象，说简单一点，其实就是一个 JavaScript 的函数库，主要是用来做数据可视化。

学习D3前的预备知识

HTML：超文本标记语言，用于设定网页的内容
CSS：层叠样式表，用于设定网页的样式
JavaScript：一种直译式脚本语言，用于设定网页的行为
DOM：文档对象模型，用于修改文档的内容和结构
SVG：可缩放矢量图形，用于绘制可视化的图形

D3“安装”

D3 是一个 JavaScript 函数库，并不需要通常所说的“安装”。它只有一个文件，在 HTML 中引用即可。目前D3已经更新到V5版本。因为原理是差不多的，所以仍然以V5版本为例作讲解。

<script type="text/javascript" src="http://d3js.org/d3.v5.min.js"></script>
<script>var width = 800;var height = 800;var svg = d3.select("body").append("svg").attr("width",width).attr("height",height);var marge = {top:10,bottom:10,left:10,right:10}var g = svg.append("g").attr("transform","translate("+marge.top+","+marge.left+")");//准备数据var nodes = [//节点集{name:"陕西省",group:2.5},{name:"西安市",group:2},{name:"安康市",group:2},{name:"咸阳市",group:2},{name:"宝鸡市",group:2},{name:"铜川市",group:2},{name:"商洛市",group:2},{name:"汉中市",group:2},{name:"延安市",group:2},{name:"兴平市",group:2},{name:"碑林区",group:1.5},{name:"未央区",group:1.5},{name:"莲湖区",group:1.5},{name:"新城区",group:1.5},{name:"户县",group:1.5},{name:"祖庵镇",group:1},{name:"甘河镇",group:1},{name:"蒋村镇",group:1},];var edges = [//边集{source:0,target:1,value:2},  //value控制线的长短{source:0,target:2,value:2},{source:0,target:3,value:2},{source:0,target:4,value:2},{source:0,target:5,value:2},{source:0,target:6,value:2},{source:0,target:7,value:2},{source:0,target:8,value:2},{source:0,target:9,value:2},{source:1,target:10,value:1.5},{source:1,target:11,value:1.5},{source:1,target:12,value:1.5},{source:1,target:13,value:1.5},{source:1,target:14,value:1.5},{source:14,target:15,value:1},{source:14,target:16,value:1},{source:14,target:17,value:1},];//设置一个color的颜色比例尺，为了让不同的扇形呈现不同的颜色var colorScale = d3.scaleOrdinal().domain(d3.range(nodes.length)).range(d3.schemeCategory10);var forceSimulation = d3.forceSimulation().force("link",d3.forceLink()).force("charge",d3.forceManyBody()).force("center",d3.forceCenter());//生成节点数据forceSimulation.nodes(nodes).on("tick",ticked);//这个函数很重要，后面给出具体实现和说明//生成边数据forceSimulation.force("link").links(edges).distance(function(d){//每一边的长度return d.value*100;})//设置图形的中心位置forceSimulation.force("center").x(width/2).y(height/2);//在浏览器的控制台输出console.log(nodes);console.log(edges);//绘制边var links = g.append("g").selectAll("line").data(edges).enter().append("line").attr("stroke",function(d,i){return colorScale(d.value);   //边的颜色//return "#ccc";}).attr("stroke-width",1);//边上文字var linksText = g.append("g").selectAll("text").data(edges).enter().append("text").text(function(d){return d.relation;})//建立用来放在每个节点和对应文字的分组<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));//绘制节点gs.append("circle")// .attr("r",20).attr("r",function (d,i) {    //圆圈半径return d.group*15;}).attr("fill",function(d,i){//return colorScale(i);return colorScale(d.group);})//文字gs.append("text")/*.attr("x",-10).attr("y",-20).attr("dy",10)*/.attr("x",-25).attr("y",-5).attr("dy",10).text(function(d){return d.name;})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 + ")"; });}//dragfunction 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;}</script>

效果：

D3实战(1):力导向图相关推荐

d3.js实现力导向图圈选框选
#d3.js实现力导向图圈选框选今天给大家带来的是如何在2D可视化图形中加入通过鼠标拖动圈选功能,以力导向图为例. ##最终效果 demo跳转 ##代码解析我们是要在节点的上方绘制一个矩形覆盖节点 ...
D3.js实现力导向图(Dray和Zoom)
今天遇到个问题就是把json(里面nodes和edges属性)文件通过D3.js展示出来,下午终于弄出来了,写篇博客记录一下. 先展示一下效果图: 放大后是这个效果: 什么是力导向图 D3.js官网: ...
使用d3.js开发力导向图
最近项目需要写一个d3的力导向图,之前没接触过d3.js 所以吧这次开发的经历写一下文章目录分配点与线创建dom 线点绘制线友情提示:不要让设计设计的华丽呼哨,点多了很卡,而且svg 有些 ...
关于用d3.js画力导向图（Force-directed Graph）—如何让图收放自如
使用d3画出很好看的力图,可以展示那种Neo4j知识图谱的效果.但是当一满屏都是小圆圈时又有点丧失了即看即懂的效果.因此需要实现对节点的收放. 主要是对生成力图的数据点集进行操作. 其中在收回某个节点 ...
D3.js的v5版本入门教程（第十四章）—— 力导向图
D3.js的v5版本入门教程(第十四章) 这一章我们来绘制一个力导向图,什么叫力导向图,通俗一点将就是有节点和线组成,当鼠标拖拽一个节点时,其他节点都会受到影响(力导向图有多种类型,本章绘制的效果就是 ...
python力导向图论文_力导向图（关系图） echarts的运用
Echarts关系图-力引导布局需要做一个树形图,可以查看各个人员的关系. 可伸缩的力引导图-失败刚开始,打算做一个可展开和伸缩的,搜索时候发现CSDN有一篇美美哒程序媛写的Echarts For ...
d3 力导向图 force graph
背景:项目 vue.js + d3 v4 力导向图可以直观看出各个元素之间的相互作用力数据: {nodes:[{id:xxx, group: xx},{},...] // nodes 是每个节点 g ...
D3.js 力导向图来处理拓扑图
记录一点碰到的问题和解决方案.感觉国内关于D3.js 4.0版本的相关资料还是少. 力导向图布局 D3一种布局的方式,可以将你nodes links的节点数据转换成可以绘制的坐标点数据,然后通过svg ...
D3.js系列——布局：饼状图和力导向图
一.饼状图在布局的应用中,最简单的就是饼状图. 1.数据有如下数据,需要可视化: var dataset = [ 30 , 10 , 43 , 55 , 13 ]; 这样的值是不能直接绘图的.例如 ...
d3力导向图增加节点_d3.js力导向图节点如何都显示在边框内
最近用到d3.js中的force力导向图,想实现效果如下,所有城市节点都在可视范围内,如果超出有滚动条也可以. 遇到的问题是,当节点一多,有的节点就会跑到外面去,这边是通过加大charge相互作用力, ...

D3实战(1):力导向图

D3实战(1):力导向图相关推荐

最新文章

热门文章