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",
"percent": "55%",
"children": []
},
{
"name": "公司5-3",
"hasHumanholding": false,
"amount": "100",
"percent": "55%",
"children": []
},
{
"name": "公司5-4",
"hasHumanholding": false,
"amount": "100",
"percent": "55%",
"children": []
}
]
}
]
},
"upward": {
"direction": "upward",
"name": "origin",
"children": [{
"name": "公司6",
"hasHumanholding": false,
"amount": "100",
"percent": "55%",
"children": [{
"name": "公司6-1",
"hasHumanholding": false,
"amount": "100",
"percent": "55%",
"children": []
},
{
"name": "公司6-2",
"hasHumanholding": false,
"isExpand": false,
"amount": "100",
"percent": "55%",
"children": [{
"name": "公司6-2-1",
"hasHumanholding": false,
"amount": "100",
"percent": "55%",
"children": []
},
{
"name": "公司6-2-2",
"hasHumanholding": false,
"amount": "100",
"percent": "55%",
"children": []
}
]
},
{
"name": "公司6-3",
"hasHumanholding": false,
"amount": "100",
"percent": "55%",
"children": []
}
]
}]
}
}
rootName = 'xxxxxxxxxxxxx公司';
drawing();
};
var drawing = function() {
var _this = this;
// var rootName = ''; //根节点的名字
var rootRectWidth = 0; //根节点rect的宽度
var downwardLength = 0,
upwardLength = 0;
var forUpward = true
var treeChart = function(d3Object) {
this.d3 = d3Object;
this.directions = ['upward', 'downward'];
};
treeChart.prototype.drawChart = function() {
// First get tree data for both directions.
this.treeData = {};
var that = this;
that.directions.forEach(function(direction) {
that.treeData[direction] = _this.rootData[direction];
});
// rootName = '上海冰鉴信息科技有限公司';
rootRectWidth = _this.rootName.length * 15;
//获得upward第一级节点的个数
upwardLength = _this.rootData.upward.children.length;
//获得downward第一级节点的个数
downwardLength = _this.rootData.downward.children.length;
that.graphTree(that.getTreeConfig());
};
treeChart.prototype.getTreeConfig = function() {
var treeConfig = {
'margin': {
'top': 10,
'right': 5,
'bottom': 0,
'left': 30
}
}
treeConfig.chartWidth = (1100 - treeConfig.margin.right - treeConfig.margin.left);
treeConfig.chartHeight = (600 - treeConfig.margin.top - treeConfig.margin.bottom);
treeConfig.centralHeight = treeConfig.chartHeight / 2;
treeConfig.centralWidth = treeConfig.chartWidth / 2;
treeConfig.linkLength = 120;
treeConfig.duration = 500; //动画时间
return treeConfig;
};
treeChart.prototype.graphTree = function(config) {
var that = this;
var d3 = this.d3;
var linkLength = config.linkLength;
var duration = config.duration;
var hasChildNodeArr = [];
var id = 0;
// var diagonal = d3.svg.diagonal()
// .projection(function(d) {
// return [d.x, d.y];
// });
// 曲线
// var diagonal = d3.svg.diagonal()
// .source(function(d) {
// return {
// "x": d.source.x,
// "y": d.source.name == 'origin' ? (forUpward ? d.source.y -20 :d.source.y + 20) : (forUpward ? d.source.y - 60 : d.source.y + 60)
// };
// })
// .target(function(d) {
// return {
// "x": d.target.x,
// "y": d.target.y
// };
// })
// .projection(function(d) {
// return [d.x, d.y];
// });
//折线
var diagonal = function(obj) {
var s = obj.source;
var t = obj.target;
return (
"M" +
s.x +
"," +
s.y +
"L" +
s.x +
"," +
(s.y + (t.y - s.y) / 2) +
"L" +
t.x +
"," +
(s.y + (t.y - s.y) / 2) +
"L" +
t.x +
"," +
t.y
);
}
// d3.select("#zoomIn")
// .on("click", function(d) {
// zoom.scaleBy(svg, 0.9); // 执行该方法后 会触发zoom事件
// let tran = d3.zoomTransform(svg.node());
// // svg.attr("transform", `translate(${tran.x},${tran.y}),scale(${tran.k})`); // 您可以手动地更新
// console.log(tran);
// });
var zoom = d3.behavior.zoom()
.scaleExtent([0.5, 2])
.on('zoom', redraw);
var svg = d3.select('#D3svg')
.append('svg')
.attr('width', config.chartWidth + config.margin.right + config.margin.left)
.attr('height', config.chartHeight + config.margin.top + config.margin.bottom)
.attr('xmlns', 'http://www.w3.org/2000/svg')
.on('mousedown', disableRightClick)
.call(zoom)
.on('dblclick.zoom', null);
var treeG = svg.append('g')
.attr('class', 'gbox')
.attr('transform', 'translate(' + config.margin.left + ',' + config.margin.top + ')');
//箭头(下半部分)
var markerDown = svg.append("marker")
.attr("id", "resolvedDown")
.attr("markerUnits", "strokeWidth") //设置为strokeWidth箭头会随着线的粗细发生变化
.attr("markerUnits", "userSpaceOnUse")
.attr("viewBox", "0 0 12 12") //坐标系的区域
.attr("refX", 30) //箭头坐标
.attr("refY", 6)
.attr("markerWidth", 12) //标识的大小
.attr("markerHeight", 12)
.attr("orient", "90") //绘制方向，可设定为：auto（自动确认方向）和 角度值
.attr("stroke-width", 2) //箭头宽度
.append("path")
// .attr("d", "M0,-5L10,0L0,5") //箭头的路径
.attr("d", "M2,2 L12,6 L2,10 L4,6 L2,2") //箭头的路径
.attr('fill', '#000'); //箭头颜色
//箭头(上半部分)
var markerUp = svg.append("marker")
.attr("id", "resolvedUp")
.attr("markerUnits", "strokeWidth") //设置为strokeWidth箭头会随着线的粗细发生变化
.attr("markerUnits", "userSpaceOnUse")
.attr("viewBox", "0 0 12 12") //坐标系的区域
.attr("refX", -30) //箭头坐标
.attr("refY", 6)
.attr("markerWidth", 12) //标识的大小
.attr("markerHeight", 12)
.attr("orient", "90") //绘制方向，可设定为：auto（自动确认方向）和 角度值
.attr("stroke-width", 2) //箭头宽度
.append("path")
.attr("d", "M2,2 L12,6 L2,10 L4,6 L2,2") //箭头的路径
.attr('fill', '#000'); //箭头颜色
// Initialize the tree nodes and update chart.
for (var d in this.directions) {
var direction = this.directions[d];
var data = that.treeData[direction];
data.x0 = config.centralWidth;
data.y0 = config.centralHeight;
data.children.forEach(collapse);
update(data, data, treeG);
}
function update(source, originalData, g) {
console.log('source', source)
console.log('originalData', originalData)
var direction = originalData['direction'];
forUpward = direction == 'upward';
var node_class = direction + 'Node';
var link_class = direction + 'Link';
var downwardSign = (forUpward) ? -1 : 1;
var nodeColor = (forUpward) ? '#37592b' : '#51a56e';
var isExpand = false;
var statusUp = true;
var statusDown = true;
var nodeSpace = 130;
var tree = d3.layout.tree().so.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0