使用Neo4j和D3.js构建关系网络（neo4jd3.js）

图

Neo4j，作为一种基于图的数据库，可以通过网络关系来存储和查询数据，而D3.js则是目前使用最为广泛的可视化工具，一起能够构建出一个功能强大的关系网络图。

Neo4j有着许多节点和关系，它们会被赋予统一的数据结构，并且会同时也指定相互之间的关系和属性，这里使用Neo4j获取网络数据，它们可以准确的表达网络的关系，以及它们之间的强烈关系。

借助Neo4j，在数据可视化层面上来看，通过一些简单的代码：

`MATCH (x)(y)

RETURN z, x, y`

可以从所有购买顾客的关系中，查询所有的顾客、关系和关系类型，从而得到从顾客到订单的关系数据。

接下来就是可视化时D3.js的使用。这是一个JavaScript库，它通过简洁、独特的API构建出强大的交互式图表和关系网络图。

首先，得到节点和边数据：

`var nodes = dataMapping.nodes;

var edges = dataMapping.edges;`

然后初始化一个D3 canvas：

`var width = 1000;

var height = 1000;

var svg = d3.select( #dag-container )

.append( svg )

.attr( width , width)

.attr( height , height);`

初始化一个 D3.js的力场图

`var simulation = d3.forceSimulation()

.force( link , d3.forceLink().id(function (d) {return d.id;}))

.force( charge , d3.forceManyBody())

.force( collide , d3.forceCollide())

.force( center , d3.forceCenter(width / 2, height / 2));`

添加数据

`var link = svg.append( g )

.attr( class , links )

.selectAll( line )

.data(edges)

.enter()

.append( line )

.attr( stroke-width , 3);

var node = svg.append( g )

.attr( class , nodes )

.selectAll( circle )

.data(nodes)

.enter()

.append( circle )

.attr( r , 20)

.attr( fill , #9ACD32 )

.call(d3

.drag()

.on( start , dragStart)

.on( drag , dragging)

.on( end , dragEnd));`

添加箭头

`svg.append( defs ).selectAll( marker )

.data(edges)

.enter().append( marker )

.attr( id , function (d) { return d.id; })

.attr( viewBox , 0 -5 10 10 )

.attr( refX , 20)

.attr( refY , 0)

.attr( markerWidth , 10)

.attr( markerHeight , 10)

.attr( orient , auto )

.append( path )

.attr( d , M0,-5L10,0L0,5 );`

最后，通过一些嵌套函数，来使节点在弹性拉力作用时“活”起来：

`simulation.nodes(nodes)

.on( tick , tick);

simulation.force( link )

.links(edges);

function tick() {

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;

});

}`

通过刚才的代码，就可以借助 Neo4j 和 D3.js 构建出一个关系网络图，在实战中有着诸多应用。

我想要获取技术服务或软件
服务范围：MySQL、ORACLE、SQLSERVER、MongoDB、PostgreSQL 、程序问题
服务方式：远程服务、电话支持、现场服务，沟通指定方式服务
技术标签：数据恢复、安装配置、数据迁移、集群容灾、异常处理、其它问题

本站部分文章参考或来源于网络，如有侵权请联系站长。
数据库远程运维 使用Neo4j和D3.js构建关系网络（neo4jd3.js）