目录
一、使用d3.js
二、 neo4jd3.js
三、neovis.js
一、基于D3.js (自由度高,写起来麻烦)
二、基于neovis.js (基于d3库,简洁,但样式固定,自由度低。)
三、基于neo4jd3.js (融合neovis与d3,数据格式可用d3neo4j的,或根据需求自己重写方法) https://github.com/eisman/neo4jd3
Svg 不推荐在HTML4和XHTML中使用(但在HTML5允许)
一、使用d3.js
效果:
1.引入官方js
定义背景/图片大小
用svg绘制背景、节点、线条、箭头。
1.请求json 数据(处理成可用等d3格式{node:{ },relaton:{source: ,target: ,type: })
2. d3默认按索引链接结点,要强制改为通过id链接它们(myerror: 注意 === 与 == 的不同,数据类型会导致错误)
3.构造力导向布局
力布局使用:https://github.com/d3/d3/wiki/%E5%8A%9B%E5%B8%83%E5%B1%80
D3.layout.force( )构造力导向布局,force.start( ) 启动模拟;
force.tick触发仿真第一步(如更新节点的x和y属性);
force.drag( )交互式拖动;
4.Select元素,并操作select,据需求自定义样式属性()。
选择器使用参考:https://github.com/d3/d3/wiki/%E9%80%89%E6%8B%A9%E5%99%A8#append
https://github.com/d3/d3/wiki/%E9%80%89%E6%8B%A9%E5%99%A8
【D3中,select 返回第一个匹配的元素,selectAll遍历次序中所有匹配的元素。】
代码:
.nodetext{
font-size:12px;
font-family:SimSun;//字体
fill:#000000;
}
.linetext{
fill:#1f77b4;
fill-opacity:0.0;
.circleImg{
stroke:#ff7f0e;
stroke-width:1.5px;
var width =900;
var height =800;
var img_w =77;
var img_h =80;
var radius =30;
var svg =d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height);
var edges =[];
d3.json("my.json",function(error,root){
if(error ){
return console.log(error);
console.log(root);
root.edges.forEach(function (e) {
var sourceNode =root.nodes.filter(function (n) {
return n.id ===e.source;
})[0],
targetNode =root.nodes.filter(function (n) {
http:
})[0];
edges.push({
source:sourceNode,
target:targetNode,
relation:e.type
})
});
console.log(edges)
var force =d3.layout.force()
.nodes(root.nodes)
.links(edges)
.size([width,height])
.linkDistance(200)
.charge(-1500)
.start();
var defs =svg.append("defs");
var arrowMarker =defs.append("marker")
.attr("id","arrow")
.attr("markerUnits","strokeWidth")
.attr("markerWidth","15")
.attr("markerHeight","15")
.attr("viewBox","0 0 12 12")
.attr("refX","17")
.attr("refY","6")
.attr("orient","auto");
var arrow_path ="M2,2 L10,6 L2,10 L6,6 L2,2";
arrowMarker.append("path")
.attr("d",arrow_path)
.attr("fill","#ccc");
var edges_line =svg.selectAll("line")
.data(edges)
.enter()
.append("line")
.attr("class","line")
.style("stroke","#ddd")
.style("linewidth",2)
.attr("marker-end","url(#arrow)")
.style("stroke-width",3);
var edges_text =svg.selectAll(".linetext")
.append("text")
.attr("class","linetext")
.text(function(d){
return d.relation;
})
.style("fill-opacity",1.0);
var nodes_img =svg.selectAll("image")
.data(root.nodes)
.append("circle")
.attr("class","circleImg")
.attr("r",radius)
.attr("fill",function(d,i){
var defs =svg.append("defs").attr("id","imgdefs")
var catpattern =defs.append("pattern")
.attr("id","catpattern" + i)
.attr("height",1)
.attr("width",1)
catpattern.append("image")
宝哥软件园 .attr("x",- (img_w / 2 - radius))
.attr("y",- (img_h / 2 - radius))
.attr("width",img_w)
.attr("height",img_h)
.attr("xlink:href",d.labels)
return "url(#catpattern" + i + ")";
.call(force.drag);
var text_dx =-20;
var text_dy =20;
var nodes_text =svg.selectAll(".nodetext")
.style("stroke","#ff7f0e")
.attr("class","nodetext")
.attr("dx",text_dx)
.attr("dy",text_dy)
var uservalue =d.properties.username;
var personvalue =d.properties.person;
var phonevalue =d.properties.phone;
if (uservalue ==undefined ){
uservalue ="";
}
if(personvalue ==undefined){
personvalue ="";
if (phonevalue ==undefined){
phonevalue ="";
return uservalue + phonevalue + personvalue;
});
force.on("tick",function(){
root.nodes.forEach(function(d,i){
d.x =d.x - img_w/2 < 0 ?img_w/2 :d.x ;
d.x =d.x + img_w/2 >width ?width - img_w/2 :d.x ;
d.y =d.y - img_h/2 < 0 ?img_h/2 :d.y ;
d.y =d.y + img_h/2 + text_dy >height ?height - img_h/2 - text_dy :d.y ;
edges_line.attr("x1",function(d){return d.source.x;});
edges_line.attr("y1",function(d){return d.source.y;});
edges_line.attr("x2",function(d){return d.target.x;});
edges_line.attr("y2",function(d){return d.target.y;});
edges_text.attr("x",function(d){return (d.source.x宝哥软件园 + d.target.x) / 2 ;});
edges_text.attr("y",function(d){return (d.source.y + d.target.y) / 2 ;});
nodes_img.attr("cx",function(d){return d.x });
nodes_img.attr("cy",function(d){return d.y });
nodes_text.attr("x",function(d){return d.x });
nodes_text.attr("y",function(d){return d.y + img_w/2;});
});
mydata.json
{
"nodes": [{
"id": "2",
"labels": "./image/wode.png",
"properties": {
"person": "Person2"
}
}, {
"id": "58688",
"phone": "85266978333"
"id": "128386",
"username": "Samuel_lee"
}],
"edges": [{
"id": "23943",
"type": "has",
"startNode": "2",
"endNode": "58688",
"properties": {},
"source": "2",
"tarwww.cppcns.comget": "58688"
"id": "94198",
"type": "registered",
"startNode": "58688",
"endNode": "128386",
"source": "58688",
"target": "128386"
}]
}
二、 neo4jd3.js
https://github.com/eisman/neo4jd3
效果:
与neovis.js类似,根据d3/neo4j的数据格式,将数据传入,根据需求渲染结点图像关系,但样式固定。
可以重写js中的数据与方法。
在这里,出现了问题:我在js中修改的方法无法被使用。
根据排查,最后发现在代码末尾有一行注释:
源映射是用来为压缩后的代码调试提供方便的,为了提高性能,很多站点都会先压缩 javascript 代码然后上线,
但如果代码运行时出现错误,浏览器只会显示在已压缩的代码中的位置,很难确定真正的源码错误位置。
要更改js记得将这行注释删除。
body,
html,
http://www.cppcns.com
.neo4jd3{
height:100%;
overflow:hidden;
}