基于d3.js/neovis.js/neod3.js實(shí)現(xiàn)鏈接neo4j圖形數(shù)據(jù)庫(kù)的圖像化顯示功能
一、基于D3.js （自由度高，寫(xiě)起來(lái)麻煩）
二、基于neovis.js （基于d3庫(kù)，簡(jiǎn)潔，但樣式固定，自由度低。）
三、基于neo4jd3.js （融合neovis與d3，數(shù)據(jù)格式可用d3\neo4j的，或根據(jù)需求自己重寫(xiě)方法） https://github.com/eisman/neo4jd3
Svg 不推薦在HTML4和XHTML中使用（但在HTML5允許）
一、使用d3.js
效果：
1.引入官方j(luò)s
定義背景/圖片大小
用svg繪制背景、節(jié)點(diǎn)、線條、箭頭。
1.請(qǐng)求json 數(shù)據(jù)（處理成可用等d3格式{node:{ },relaton:{source: ,target: ,type: }）
2. d3默認(rèn)按索引鏈接結(jié)點(diǎn),要強(qiáng)制改為通過(guò)id鏈接它們（myerror: 注意 === 與 == 的不同，數(shù)據(jù)類(lèi)型會(huì)導(dǎo)致錯(cuò)誤）
3.構(gòu)造力導(dǎo)向布局
力布局使用：https://github.com/d3/d3/wiki/%E5%8A%9B%E5%B8%83%E5%B1%80
D3.layout.force( )構(gòu)造力導(dǎo)向布局，force.start( ) 啟動(dòng)模擬;
force.tick觸發(fā)仿真第一步（如更新節(jié)點(diǎn)的x和y屬性）;
force.drag( )交互式拖動(dòng);
4.Select元素，并操作select，據(jù)需求自定義樣式屬性（）。
選擇器使用參考：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 返回第一個(gè)匹配的元素，selectAll遍歷次序中所有匹配的元素?！?/p>
代碼：
<html>
<head>
<meta charset="utf-8">
<title>Force</title>
<style>
.nodetext {
font-size: 12px ;
font-family: SimSun;//字體
fill:#000000;
}
.linetext {
/*font-family: SimSun;*/
fill:#1f77b4;
fill-opacity:0.0;
.circleImg {
stroke: #ff7f0e;
stroke-width: 1.5px;
</style></head>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
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);
//默認(rèn)按索引鏈接結(jié)點(diǎn),我強(qiáng)制改成通過(guò)id鏈接它們。
root.edges.forEach(function (e) {
var sourceNode = root.nodes.filter(function (n) {
return n.id === e.source;
})[0],
targetNode = root.nodes.filter(function (n) {
return n.id === e.target;
})[0];
edges.push({
source: sourceNode,
target: targetNode,
relation: e.type
})
});
console.log(edges)
//D3力導(dǎo)向布局
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")//標(biāo)識(shí)長(zhǎng)寬
.attr("markerHeight","15")
.attr("viewBox","0 0 12 12")//坐標(biāo)系區(qū)域
.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);
//邊上的文字（人物之間的關(guān)系）
var edges_text = svg.selectAll(".linetext")
.append("text")
.attr("class","linetext")
.text(function(d){
return d.relation;
})
.style("fill-opacity",1.0);//不透明度
// 圓形圖片節(jié)點(diǎn)（人物頭像）
var nodes_img = svg.selectAll("image")
.data(root.nodes)
.append("circle")
.attr("class", "circleImg")
.attr("r", radius)
.attr("fill", function(d, i){
//創(chuàng)建圓形圖片
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 + ")";
// .on("mouseover",function(d,i){
// //顯示連接線上的文字
// edges_text.style("fill-opacity",function(edge){
// if( parseInt(edge.source) === d || parseInt(edge.target) === d ){
// return 1.0;
// }
// });
// })
// .on("mouseout",function(d,i){
// //隱去連接線上的文字
// if( edge.source === d || edge.target === d ){
// return 0.0;
.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(){
//限制結(jié)點(diǎn)的邊界
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 ; });
//更新結(jié)點(diǎn)圖片和文字
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; });
});
</script>
</body>
</html>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",
"target": "58688"
"id": "94198",
"type": "registered",
"startNode": "58688",
"endNode": "128386",
"source": "58688",
"target": "128386"
}]
}二、 neo4jd3.js
https://github.com/eisman/neo4jd3
效果：
與neovis.js類(lèi)似，根據(jù)d3/neo4j的數(shù)據(jù)格式，將數(shù)據(jù)傳入，根據(jù)需求渲染結(jié)點(diǎn)圖像關(guān)系，但樣式固定。
可以重寫(xiě)js中的數(shù)據(jù)與方法。
在這里，出現(xiàn)了問(wèn)題：我在js中修改的方法無(wú)法被使用。
根據(jù)排查，最后發(fā)現(xiàn)在代碼末尾有一行注釋?zhuān)?/p>
源映射是用來(lái)為壓縮后的代碼調(diào)試提供方便的，為了提高性能，很多站點(diǎn)都會(huì)先壓縮 JavaScript 代碼然后上線，
但如果代碼運(yùn)行時(shí)出現(xiàn)錯(cuò)誤，瀏覽器只會(huì)顯示在已壓縮的代碼中的位置，很難確定真正的源碼錯(cuò)誤位置。
要更改js記得將這行注釋刪除。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<title>neo4jd3.js</title>
<link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" >
<link rel="stylesheet" href="css/font-awesome.min.css" rel="external nofollow" >
<link rel="stylesheet" href="css/neo4jd3.min.css?v=0.0.1" rel="external nofollow" >
<script src="js/d3.min.js"></script>
<script src="js/2.js?v=0.0.2"></script>
<style>
body,
html,
.neo4jd3 {
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="neo4jd33"></div>
<!-- Scripts -->
<script type="text/javascript" >
function init() {
var neo4jd3 = new Neo4jd3('#neo4jd33', {
icons: {
},
images: {
'person': 'img/twemoji/wode.png',
minCollision: 50,
neo4jDataUrl:'./json/mydata.json',
nodeRadius: 30,
zoomFit: false
});
window.onload = init;
</script>
<script>
</body>
</html>三、neovis.js
詳細(xì)使用文檔見(jiàn)：
https://www.npmjs.com/package/neovis.js
https://github.com/neo4j-contrib/neovis.js#readme
Neovis.js 需要鏈接 neo4j 的bolt地址，并書(shū)寫(xiě)cypher語(yǔ)句獲取查詢(xún)結(jié)果。
創(chuàng)建一個(gè)div，在其中制定οnlοad=“draw( )”，然后自己定義draw( )。
使用簡(jiǎn)單，但模板樣式固定。
function draw() {
var config = {
container_id: "viz",
server_url:"bolt://xxxxxxxx",
server_user: "",
server_password: "",
labels: {
"person": {
"caption": "person",
},
"phone":{
"caption": "phone",
},
"zello":{
"caption": "username",
}
relationships: {
"has": {
"thickness": 0.003,
"caption": true
,"registered":{
initial_cypher: "MATCH (n) RETURN n LIMIT 25",
arrows: true
};
viz = new NeoVis.default(config);
console.log(viz);
viz.render();
}到此這篇關(guān)于基于d3.js/neovis.js/neod3.js實(shí)現(xiàn)鏈接neo4j圖形數(shù)據(jù)庫(kù)的圖像化顯示功能的文章就介紹到這了,更多相關(guān)neo4j圖像化顯示內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要是對(duì)用鼠標(biāo)滾輪改變圖片大小的示例代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
基于JavaScript實(shí)現(xiàn)文件秒傳功能
在互聯(lián)網(wǎng)高速發(fā)展的今天，文件上傳已經(jīng)成為網(wǎng)頁(yè)應(yīng)用中的一個(gè)基本功能，隨著用戶上傳文件尺寸的不斷增大、對(duì)質(zhì)量清晰度的要求也越來(lái)越高，所以本文給大家介紹了如何使用JavaScript實(shí)現(xiàn)文件秒傳功能,需要的朋友可以參考下2024-01-01
有這么一個(gè)需求，開(kāi)發(fā)了一套系統(tǒng)，當(dāng)用戶離開(kāi)桌面或者一段時(shí)間不操作的話，需要把該系統(tǒng)所有打開(kāi)頁(yè)面鎖定起來(lái)，本文就詳細(xì)的介紹一下，感興趣的可以了解一下2021-06-06
微信小程序調(diào)用PHP后臺(tái)接口 解析純html文本
這篇文章主要為大家詳細(xì)介紹了微信小程序調(diào)用PHP后臺(tái)接口，解析純html文本的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
javascript 實(shí)現(xiàn)的類(lèi)似hao123的多郵箱登錄效果
javascript 實(shí)現(xiàn)的類(lèi)似hao123的多郵箱登錄效果...2007-08-08
uniapp?APP消息推送方案實(shí)現(xiàn)全過(guò)程
前段時(shí)間開(kāi)發(fā)app的時(shí)候要開(kāi)始做消息推送功能了,下面這篇文章主要給大家介紹了關(guān)于uniapp?APP消息推送方案實(shí)現(xiàn)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
微信小程序云開(kāi)發(fā)如何使用npm安裝依賴(lài)
這篇文章主要為大家詳細(xì)介紹了微信小程序云開(kāi)發(fā)如何使用npm安裝依賴(lài)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
現(xiàn)在微博都有一個(gè)不錯(cuò)的效果就是會(huì)實(shí)時(shí)的動(dòng)態(tài)滾動(dòng)并顯示最新的信息了，下面我來(lái)給大家介紹仿新浪微博大廳首頁(yè)滾動(dòng)效果,希望此方法對(duì)大家會(huì)有幫助。2015-10-10
JS實(shí)現(xiàn)DOM節(jié)點(diǎn)插入操作之子節(jié)點(diǎn)與兄弟節(jié)點(diǎn)插入操作示例
這篇文章主要介紹了JS實(shí)現(xiàn)DOM節(jié)點(diǎn)插入操作之子節(jié)點(diǎn)與兄弟節(jié)點(diǎn)插入操作,涉及JavaScript節(jié)點(diǎn)的創(chuàng)建、添加簡(jiǎn)單操作技巧,需要的朋友可以參考下2018-07-07
Javascript 生成 HTML元素的方法在本文中介紹2種，第一種是比較正規(guī)的創(chuàng)建元素方法，第二種是利用javascript中的write()方法直接寫(xiě)出html元素。2014-05-05