zooming और panning जे एस/JQuery में जैसे हम एसवीजी

Question

का उपयोग कर रहा नोड्स के हजारों के साथ एक संगठन चार्ट बनाने रहा हूँ, लेकिन यहाँ एक नमूना उदाहरण बनाया यह कर सकते हैं,

https://jsfiddle.net/jy6j87g0/2/

आप जूमिंग और पैनिंग देख सकते हैं काम कर रहा है लेकिन मैं इसे यहाँ की तरह काम करने के लिए चाहते हैं,

http://live.yworks.com/demobrowser/index.html#Organization-Charts

विशिष्ट होना करने के लिए

मैं अपने बेला बनाने के लिए कोशिश कर रहा हूँ,

• चार्ट के माउस सूचक का केंद्र नहीं स्थिति के आधार पर ज़ूम करने के लिए
• न्यूनतम आकार की सीमा मेरी चार्ट तो जा सकते हैं है यह अदृश्य नहीं जाना होगा
• मैं सीएसएस परिवर्तन की और पड़ताल या बजाय d3.js का उपयोग करें और खरोंच से सब कुछ बनाना चाहिए मैं कहाँ शुरू करने के लिए खोजने के लिए संघर्ष कर रहा हूँ एक रीसेट बटन

है,। -

Link to libraryhttps://github.com/dabeng/OrgChart

'use strict'; 
 

 
(function($) { 
 

 
    $(function() { 
 

 
    var datascource = { 
 
     'name': 'Lao Lao', 
 
     'title': 'general manager', 
 
     'children': [{ 
 
     'name': 'Bo Miao', 
 
     'title': 'department manager' 
 
     }, { 
 
     'name': 'Su Miao', 
 
     'title': 'department manager', 
 
     'children': [{ 
 
      'name': 'Tie Hua', 
 
      'title': 'senior engineer' 
 
     }, { 
 
      'name': 'Hei Hei', 
 
      'title': 'senior engineer', 
 
      'children': [{ 
 
      'name': 'Pang Pang', 
 
      'title': 'engineer' 
 
      }, { 
 
      'name': 'Xiang Xiang', 
 
      'title': 'UE engineer' 
 
      }] 
 
     }] 
 
     }, { 
 
     'name': 'Yu Jie', 
 
     'title': 'department manager' 
 
     }, { 
 
     'name': 'Yu Li', 
 
     'title': 'department manager' 
 
     }, { 
 
     'name': 'Hong Miao', 
 
     'title': 'department manager' 
 
     }, { 
 
     'name': 'Yu Wei', 
 
     'title': 'department manager' 
 
     }, { 
 
     'name': 'Chun Miao', 
 
     'title': 'department manager' 
 
     }, { 
 
     'name': 'Yu Tie', 
 
     'title': 'department manager' 
 
     }] 
 
    }; 
 

 
    $('#chart-container').orgchart({ 
 
     'data': datascource, 
 
     'nodeContent': 'title', 
 
     'pan': true, 
 
     'zoom': true 
 
     }) 
 
     .on('touchmove', function(event) { 
 
     event.preventDefault(); 
 
     }); 
 

 
    }); 
 

 
})(jQuery);

<link href="https://cdn.rawgit.com/FortAwesome/Font-Awesome/master/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://dabeng.github.io/OrgChart/css/style.css" rel="stylesheet"/> 
 
<link href="https://dabeng.github.io/OrgChart/css/jquery.orgchart.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> 
 
<script src="https://dabeng.github.io/OrgChart/js/jquery.orgchart.js"></script> 
 
<div id="chart-container"> 
 
</div>

Answer 1

कोड स्निपेट नीचे 3 आवश्यकताओं अपने प्रश्न में निर्धारित को पूरा:

1. ज़ूम माउस स्थिति पर केंद्रित है
2. स्केलिंग MIN से नीचे नहीं जा सकता है _ZOOM = 0.25
3. रीसेट बटन मूल स्थिति और स्केलिंग

मैट्रिक्स को बदलने और माउस mousemove ईवेंट हैंडलर में मनाया स्थिति मॉड्यूल चर में जमा हो जाती है, और wheel ईवेंट हैंडलर में बाद में इस्तेमाल किया पुनर्स्थापित करता है।

मेरे परीक्षणों में, wheel ईवेंट ऑर्गचर्ट द्वारा स्केलिंग संसाधित होने के बाद हमेशा ट्रिगर किया गया था। इस प्रसंस्करण के लिए अपने मामले में एक ही, या स्थिर नहीं नहीं है, तो आप यह सुनिश्चित करें कि स्केलिंग पहले से ही OrgChart द्वारा निष्पादित किया गया बनाने के लिए एक setTimeout(fn, 0) निर्माण में wheel ईवेंट हैंडलर का कोड लपेट कर सकते हैं:

.on("wheel", function (event) { 
    setTimeout(function() { 
     // Process the event after OrgChart 
     (put the code here) 
    }, 0); 
} 

'use strict'; 
 

 
(function ($) { 
 

 
    $(function() { 
 

 
     var datascource = { 
 
      'name': 'Lao Lao', 
 
      'title': 'general manager', 
 
      'children': [{ 
 
       'name': 'Bo Miao', 
 
       'title': 'department manager' 
 
      }, { 
 
       'name': 'Su Miao', 
 
       'title': 'department manager', 
 
       'children': [{ 
 
        'name': 'Tie Hua', 
 
        'title': 'senior engineer' 
 
       }, { 
 
        'name': 'Hei Hei', 
 
        'title': 'senior engineer', 
 
        'children': [{ 
 
         'name': 'Pang Pang', 
 
         'title': 'engineer' 
 
        }, { 
 
         'name': 'Xiang Xiang', 
 
         'title': 'UE engineer' 
 
        }] 
 
       }] 
 
      }, { 
 
       'name': 'Yu Jie', 
 
       'title': 'department manager' 
 
      }, { 
 
       'name': 'Yu Li', 
 
       'title': 'department manager' 
 
      }, { 
 
       'name': 'Hong Miao', 
 
       'title': 'department manager' 
 
      }, { 
 
       'name': 'Yu Wei', 
 
       'title': 'department manager' 
 
      }, { 
 
       'name': 'Chun Miao', 
 
       'title': 'department manager' 
 
      }, { 
 
       'name': 'Yu Tie', 
 
       'title': 'department manager' 
 
      }] 
 
     }; 
 

 
     var MIN_ZOOM = 0.25; // Mimimum value for scaling 
 
     var defaultMatrix = [1, 0, 0, 1, 0, 0]; // Chart at normal scaling and position 
 
     var prevMatrix = defaultMatrix; 
 
     var prevPosition = { x: 0, y: 0 }; 
 

 
     var parseNumber = function (str) { 
 
      return parseFloat(str.replace(/[^\d\.\-]/g, "")); 
 
     } 
 

 
     var getTransformMatrix = function() { 
 
      var transform = $(".orgchart").css("transform"); 
 
      if (transform !== 'none') { 
 
       var tokens = transform.split(","); 
 
       var matrix = []; 
 
       for (var i = 0; i < tokens.length; i++) { 
 
        matrix.push(parseNumber(tokens[i])); 
 
       } 
 
       return matrix; 
 
      } else { 
 
       return null; 
 
      } 
 
     }; 
 

 
     var setTransformMatrix = function (matrix) { 
 
      $(".orgchart").css("transform", "matrix(" + matrix.join(",") + ")"); 
 
      prevMatrix = matrix; 
 
     }; 
 

 
     var getMousePosition = function (event) { 
 
      var rect = $(".orgchart")[0].getBoundingClientRect(); 
 
      return { 
 
       x: event.clientX - rect.left - rect.width/2, 
 
       y: event.clientY - rect.top - rect.height/2 
 
      } 
 
     }; 
 

 
     $("#btnReset").click(function() { 
 
      setTransformMatrix(defaultMatrix); 
 
     }); 
 

 
     $("#chart-container").orgchart({ 
 
      'data': datascource, 
 
      'nodeContent': 'title', 
 
      'pan': true, 
 
      'zoom': true 
 
     }).on("touchmove", function (event) { 
 
      event.preventDefault(); 
 
     }).on("mousemove", function (event) { 
 
      // Remember transform matrix and mouse position 
 
      prevMatrix = getTransformMatrix() || prevMatrix; 
 
      prevPosition = getMousePosition(event); 
 
     }).on("wheel", function (event) { 
 
      // In my tests, this event is triggered after processing has been done by OrgChart 
 
      // If not the case, the following code can be wrapped in setTimeout(fn, 0) call 
 
      var $this = $(this); 
 
      var matrix = getTransformMatrix(); 
 
      if (matrix) { 
 
       var $orgchart = $(".orgchart"); 
 

 
       // Prevent scaling below minimum zoom 
 
       matrix[0] = Math.max(matrix[0], MIN_ZOOM); 
 
       matrix[3] = Math.max(matrix[3], MIN_ZOOM); 
 

 
       var position = getMousePosition(event); 
 

 
       // Calculate expected mouse position with new scaling 
 
       // corresponding to previous mouse position with old scaling 
 
       var expectedPosition = { 
 
        x: prevPosition.x * matrix[0]/prevMatrix[0], 
 
        y: prevPosition.y * matrix[3]/prevMatrix[3] 
 
       }; 
 

 
       // Translate chart position to match the expected position 
 
       matrix[4] += position.x - expectedPosition.x; 
 
       matrix[5] += position.y - expectedPosition.y; 
 

 
       setTransformMatrix(matrix); 
 
       prevPosition = expectedPosition; 
 
      } 
 
     }); 
 
    }); 
 

 
})(jQuery);

#btnReset 
 
{ 
 
    position: absolute; 
 
    left: 16px; 
 
    top: 16px; 
 
    z-index: 1000; 
 
}

<link href="https://cdn.rawgit.com/FortAwesome/Font-Awesome/master/css/font-awesome.min.css" rel="stylesheet" /> 
 
<link href="https://dabeng.github.io/OrgChart/css/style.css" rel="stylesheet" /> 
 
<link href="https://dabeng.github.io/OrgChart/css/jquery.orgchart.css" rel="stylesheet" /> 
 
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> 
 
<script src="https://dabeng.github.io/OrgChart/js/jquery.orgchart.js"></script> 
 
<button id="btnReset">Reset</button> 
 
<div id="chart-container"> 
 
</div>