基础知识二：网页端利用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数据进行可视化展示

标题

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

努力了这么久

我怎么舍得放弃