使用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 构建出一个关系网络图，在实战中有着诸多应用。
