网页端利用d3.js将json数据进行可视化展示
效果如上图所示,是一个最简单的效果图,包含的了基本的元素——节点,关系,文字说明
为了实现上面的效果。我们需要做以下准备
d3.js进行可视化展示的json文件格式如下,请务必仔细看清楚
代码段
{"nodes":[{"id":1971,.....},{"id":1972,.....},.......],
"links":[{"source":1971,"target":1972,.......}]}
还有一个很重要的前提,就是你需要比较了解d3.js,如果你不了解的话,请看我的这一系列博客
博客链接:
https://blog.csdn.net/qq_34414916/article/details/80026029
现在开始进入正题
1、数据准备,因为只是作为一个小知识点讲解,我们使用非常简单的数据即可(在web目录下新建一个data.json文件,并粘贴下面内容)
代码段
{"nodes":[{"name":"a","id":1971},{"name":"b","id":1972}],
"links":[{"source":1971,"target":1972,"type":"friend"}]}
2、引入必要的js框架——d3.js和jquery.js(如果没有的话,请自行去官网下载)
代码段
Title
3、可视化展示(因为代码有点长,所以这里就不附上全部代码了,只附上关键代码,大家可以在文章末尾去我的githup上面下载完整的代码)
代码段
d3.json("data.json").then(function(dataJson){
.........
}
代码说明:通过d3.json()这个函数读入json数据,并将数据传递至dataJson,这里应该是d3.js的v5版本的一种固定写法
该方法中的一些代码
代码段
//define arrow
svg.append("svg:defs")
.append("svg:marker")
.attr("id", "marker")
.attr('viewBox', '0 -5 10 10')
.attr("refX", 20)
.attr("refY",0)
.attr('markerWidth', 10)
.attr('markerHeight', 10)
.attr('orient', 'auto')
.append('svg:path')
.attr('d', 'M0,-5L10,0L0,5')
.attr("fill","brown");
代码段
//draw links
var links = svg.append("g")
.selectAll("line")
.data(defaultConfig.data.links)
.enter()
.append("line")
.attr("x1",function(n))
.attr("y1",function(n))
.attr("x2",function(n))
.attr("y2",function(n))
.attr("stroke","brown")
.attr("stroke-width",1)
.attr("marker-end","url(#marker)");
代码说明:
因为这里我只粘贴了部分代码,可能读者有点看不明白,没关系,只要关注这些重点即可
第一部分代码表示定义一个箭头,而这段代码.attr('d', 'M0,-5L10,0L0,5')表示的是定义箭头的形状,符合d3.js中path的定义格式,这里简单说明一下,M0,-5L10,0L0,5,表示从点(0,-5)开始,到(10,0),再到(0,5)画直线,如果不是很明白的可以百度一下——d3.js中路径的画法(因为这不是这个项目的主要目的,在这里就不详解了)
第二段代码只需要关注之后一行代码即可——.attr("marker-end","url(#marker)");这里表示使用前面定义的箭头,注意与第一段代码联系起来
其实,这段代码是比较通用的代码,只要你改变传入的json数据,它就能画出你需要的力导向图出来,只不过代码有点复杂(附有注释),所以你不想看也没关系,会用就行
最后,附上最终结果图
网页端利用d3.js将json数据进行可视化展示源码浏览:
https://github.com/mp2930696631/visualization-neo4j-using-java/blob/master/preparations/displayInWeb.html
网页端利用d3.js将json数据进行可视化展示
标题
坚持努力,因为最后你会发现
努力了这么久
我怎么舍得放弃
领取专属 10元无门槛券
私享最新 技术干货