d3鼠标拖拽、放大缩小后动态加载页面数据demo

最新推荐文章于 2024-04-07 18:58:35 发布

狡猾的bug

最新推荐文章于 2024-04-07 18:58:35 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： d3 文章标签： d3 鼠标点击图片动态加载数据

本文链接：https://blog.youkuaiyun.com/qq_25927437/article/details/82992992

此博客展示了如何使用D3.js库创建一个互动的图表，允许用户通过鼠标拖拽和放大缩小来动态加载和展示数据。通过加载'word.json'文件，博主演示了数据的处理和绘制过程，包括数据格式化、节点和链接的绘制、以及缩放和拖拽交互功能。此外，还包含了放大和缩小页面的功能，以及在不同视图间切换的实现。

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>
   <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/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);

       })
   })

   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 ;//拖拽前x
var m_down_y ;//拖拽前y
var m_move_x ;//拖拽后x
var m_move_y ;//拖拽后y

var isDown = false;//记录鼠标状态

   var width = '100%',height = '100%';
   var type = '1';//'1':域、系统；'2':表
//格式化数据
function formatData(paramNodes,paramLinks){
       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(x*ds+dx > 0 && x*ds+dx < screen.width
               && y*ds+dy > 0 && y*ds+dy < (screen.height -280) && m < 500/ds
           ){
&nb