jquery+d3实现股权组织结构图表效果代码-html代码-BFW代码库

jquery+d3实现股权组织结构图表效果代码

代码语言：html

所属分类：图表

代码描述：jquery+d3实现股权组织结构图表效果代码，可点击节点进行折叠。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/d3.3.5.5.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script>
</head>

<body>
    <div class="container" id="container">
        <div id="D3svg"></div>
    </div>
</body>
<script type="text/javascript">
    var container;
    		var zoom;
    		var rootData;
    		var depthInfo;
    		var rootName; //根节点名称
    
    		jQuery(document).ready(function() {
    			var child = document.getElementById("D3svg");
    			child.innerHTML = '';
    			getData();
    		});
    
    		var getData = function() {
    			rootData = {
    				"downward": {
    					"direction": "downward",
    					"name": "origin",
    					"children": [{
    							"name": "公司1",
    							"amount": "100",
    							"percent": "55%",
    							"hasHumanholding": true,
    							"hasChildren": true,
    							"isExpand": false,
    							"children": [{
    									"name": "公司1-1",
    									"hasHumanholding": false,
    									"hasChildren": true,
    									"amount": "100",
    									"percent": "55%",
    									"children": []
    								},
    								{
    									"name": "公司1-2",
    									"hasHumanholding": false,
    									"hasChildren": true,
    									"amount": "100",
    									"percent": "55%",
    									"children": []
    								}
    							]
    						},
    						{
    							"name": "公司2",
    							"amount": "100",
    							"percent": "55%",
    							"hasHumanholding": true,
    							"hasChildren": true,
    							"isExpand": false,
    							"children": [{
    									"name": "公司2-1",
    									"hasHumanholding": false,
    									"hasChildren": true,
    									"amount": "100",
    									"percent": "55%",
    									"children": []
    								},
    								{
    									"name": "公司2-2",
    									"hasHumanholding": false,
    									"hasChildren": true,
    									"amount": "100",
    									"percent": "55%",
    									"children": []
    								}
    							]
    						},
    						{
    							"name": "公司3",
    							"amount": "100",
    							"percent": "55%",
    							"hasHumanholding": true,
    							"hasChildren": true,
    							"isExpand": false,
    							"children": [{
    									"name": "公司3-1",
    									"hasHumanholding": false,
    									"hasChildren": true,
    									"amount": "100",
    									"percent": "55%",
    									"children": []
    								},
    								{
    									"name": "公司3-2",
    									"hasHumanholding": false,
    									"hasChildren": true,
    									"amount": "100",
    									"percent": "55%",
    									"children": []
    								}
    							]
    						},
    						{
    							"name": "公司4",
    							"hasHumanholding": false,
    							"hasChildren": true,
    							"amount": "100",
    							"percent": "55%",
    							"children": []
    						},
    						{
    							"name": "公司5",
    							"hasHumanholding": false,
    							"hasChildren": true,
    							"isExpand": false,
    							"amount": "100",
    							"percent": "55%",
    							"children": [{
    									"name": "公司5-1",
    									"hasHumanholding": false,
    									"amount": "100",
    									"percent": "55%",
    									"children": []
    								},
    								{
    									"name": "公司5-2",
    									"hasHumanholding": false,
    									"amount": "100",
    						.........完整代码请登录后点击上方下载按钮下载查看