d3滑鼠拖拽、放大縮小後動態載入頁面資料demo
d3滑鼠拖拽、放大縮小後動態載入頁面資料demo
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> *{ margin: 0; padding: 0; } #keyword{ height: 90%; width: 95%; position:absolute; top: 55px; bottom: 0px; z-index: 0; overflow:hidden; word-break:break-all; } #keyword2{ height: 90%; width: 95%; position: absolute; top: 55px; bottom: 0px; z-index: 0; overflow:hidden; word-break:break-all; } .link { fill: none; stroke: #666; stroke-width: 1.5px; } #licensing { fill: green; } .link.licensing { stroke: green; } .link.resolved { stroke-dasharray: 0,2 1; } circle { stroke: #333; stroke-width: 1.5px; } text { font: 12px Microsoft YaHei; pointer-events: none; text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff; } .linetext { font: 12px Microsoft YaHei; } .mytooltip{ position: absolute; height: auto; font-family: "microsoft yahei", simhei; font-size: 14px; text-align: center; border: 1px solid #999; padding: 5px; background-color: white; border-radius: 5px; opacity:0.0; } #gallery { width: 200px; height: 200px; /*background: url('img/1.JPG') no-repeat center center; background-size:100%; font-size:30px; color:#fff;*/ text-align:center; /*line-height:200px;*/ } </style> <link rel="stylesheet" type="text/css" href="css/easyui.css"> <link rel="stylesheet" type="text/css" href="css/icon.css"> </head> <body> <div title="資料展示" > <div id="keyword"> </div> <div id="keyword2" style="top:80px;position: fixed;opacity: 0"> </div> </div> <img id="img_id" src="img/map.jpg" onmousemove="imgMouseMove(this,event)" onmouseover="imgMouseOver(this)" onmouseleave="imgMouseOut(this)" onclick="imgClick(this,event)" style="position: fixed;bottom: 5px;right: 5px;z-index: 100px;width: 136.6px;height: 76.8px"/> <div class="mytooltip" id="imgtooltip"></div> <script src="assets/plugins/jquery/jquery-3.3.1.min.js"></script> <script src="assets/plugins/jquery.easyui.min.js"></script> <script src="assets/plugins/d3/d3.v3.min.js"></script> <script src="assets/plugins/html2canvas.js"></script> <script src="assets/js/pages/index.js"></script> </body> </html>
index.js
var root = {};var nodesbak = {};var colorObj = {};var imgtype = 0;var maxValue = 0;//最大的那個系統$(function (){ $.getJSON("assets/data/word.json", function (data){ root = deepClone(data,{}); //系統備份 root.nodes.concat().forEach(function(node,k) { if(node.value > maxValue){ maxValue = node.value; } colorObj[node.id] = k; nodesbak[node.id] = {name:node.id,group:node.group,x1:node.x,y1:node.y,type:node.id,value:node.value}; }); //表備份 root.nodes1.concat().forEach(function(node,k) { nodesbak[node.id] = {name:node.id,group:node.group,x1:node.x,y1:node.y,pid:node.pid,type:node.pid}; }); //畫系統佈局圖 draw(root.nodes,root.links,sys_transform,sys_scale,null); //畫表的矩形樹圖 drawTabImg(); //表矩形樹圖截圖 doScreenShot(); }) $("#img_id").hide(); $("#sys_keyword").val(""); })var links = [];//關聯關係var nodes = {};//節點資料var initscale = 1;//保留一份最初始的縮放係數，用於放大時計算最近距離var sys_scale = 1;//域、系統放大時的縮放倍數var sys_transform = [0,0];//域、系統放大時的中心座標var tab_scale = 1;//表放大時的縮放倍數var tab_transform = [0,0];//表放大時的中心座標var edges_line = null;//連線線var circle = null;//節點var edges_text = null;//連線線上的文字var text = null;//節點文字var svg = null;var force = null;//力學圖物件var zoom = null;//縮放配置var dx = 0;//x偏移量var dy = 0;//y偏移量var ds = 1;//放大縮小倍數var m_down_x ;//拖拽前xvar m_down_y ;//拖拽前yvar m_move_x ;//拖拽後xvar m_move_y ;//拖拽後yvar isDown = false;//記錄滑鼠狀態var width = '100%',height = '100%';var type = '1';//'1':域、系統；'2':表//格式化資料function formatData(paramNodes,paramLinks,pid){ var m = 0; var copynodes = deepClone(nodesbak,{}); paramNodes.forEach(function(node,k) { var x = copynodes[node.id].x1; var y = copynodes[node.id].y1; if(pid == null){ if(type == 1){ x = x*((screen.width -100)/1366); y = y*((screen.height -280)/768); } if(type == 2){ x = x*10; y = y*10; } if(x*ds+dx > 0 && x*ds+dx < screen.width && y*ds+dy > 0 && y*ds+dy < (screen.height -280) && m < 500/ds ){ nodes[node.id] = {name: node.id,group:node.group,x1:x,y1:y,type:(type ==1?node.id:node.pid)}; m++; } return; } if(pid != null && pid == node.pid){ x = x*10; y = y*10; if(x*ds+dx > 0 && x*ds+dx < screen.width && y*ds+dy > 0 && y*ds+dy < (screen.height -280) && m < 500/ds ){ nodes[node.id] = {name: node.id,group:node.group,x1:x,y1:y,type:(type ==1?node.id:node.pid)}; m++; } } }); for(var i=0;i<paramLinks.length;i++){ if(nodes[paramLinks[i].source] != null && nodes[paramLinks[i].target] != null){ links.push({ source: paramLinks[i].source, target: paramLinks[i].target, rela: paramLinks[i].value }) } } links.forEach(function(link) { //利用source和target名稱進行連線以及節點的確認 link.source = nodes[link.source]; link.target = nodes[link.target]; }); }function zoomed(){//縮放函式 svg.selectAll("g").attr("transform",//svg下的g標籤移動大小 "translate(" +d3.event.translate + ")scale(" +d3.event.scale + ")"); }//繪製圖像function draw(paramNodes,paramLinks,paramTransform,paramScale,pid) { tooltip ?tooltip.html(""):tooltip; nodes = {}; links = []; edges_line = null;//連線線 circle = null;//節點 edges_text = null;//連線線上的文字 text = null;//節點文字 formatData(paramNodes,paramLinks,pid); force = d3.layout.force()//layout將json格式轉化為力學圖可用的格式 .nodes(d3.values(nodes))//設定節點陣列 .links(links)//設定連線陣列 .size([width, height])//大小 .linkDistance(120)//連線線長度 .charge(-600)//值為+，則相互吸引，絕對值越大吸引力越大。值為-，則相互排斥，絕對值越大排斥力越大 .on("tick", tick)//開始轉換 .start(); zoom = d3.behavior.zoom()//縮放配置， .scaleExtent([0.4, 10])//縮放比例 .on("zoom", zoomed); svg = d3.select("#keyword").append("svg")//新增svg元素進行圖形的繪製 .attr("width", width) .attr("height", height) .call(zoom) .on("mousedown",function(event){ isDown = true; //獲取滑鼠按下時座標 m_down_x = d3.event.pageX;//拖拽前x m_down_y = d3.event.pageY;//拖拽前y }) .on(