基础知识二:网页端利用d3.js将json数据进行可视化展示

网页端利用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数据进行可视化展示

标题

坚持努力,因为最后你会发现

努力了这么久

我怎么舍得放弃

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180724G0B17J00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券