|
|
@@ -2,6 +2,7 @@ function Relation(legcerNo,regNo,data){
|
|
|
this.legcerNo = legcerNo;
|
|
|
this.regNo = regNo;
|
|
|
this.data = data;
|
|
|
+ this.modleFlag = data.nodes.length>15;
|
|
|
this.zoomlevel = 1;
|
|
|
this.w = 0;
|
|
|
this.h = 0;
|
|
|
@@ -12,8 +13,12 @@ function Relation(legcerNo,regNo,data){
|
|
|
this.force = null;
|
|
|
this.lines = null;
|
|
|
this.nodes = null;
|
|
|
+ this.lineLables = null;
|
|
|
this.mouseoverstatus = false;
|
|
|
this.chargeVal = -1600;
|
|
|
+ this.tickFlag = true;
|
|
|
+ this.centerNodeX = 0;
|
|
|
+ this.centerNodeY = 0;
|
|
|
}
|
|
|
Relation.prototype.init = function(){
|
|
|
var thisClass = this;
|
|
|
@@ -21,11 +26,20 @@ Relation.prototype.init = function(){
|
|
|
thisClass.h = $("#entrelation").height();
|
|
|
$("#entrelation-infovis").width(thisClass.w).append(
|
|
|
'<div class="entrelation-controlls hidden-sm hidden-xs">'
|
|
|
- +'<div class="entrelation-item">'
|
|
|
- +'<div id="entrelation-fullscreen" class="entrelation-box" title_pos="left"><div class="entrelation-fullscreen"></div></div>'
|
|
|
- +'</div>'
|
|
|
+ +'<div id="entrelation-pattern" class="entrelation-box" title_pos="left">一般模式</div>'
|
|
|
+ +'<div id="entrelation-verbosemode" class="entrelation-box" title_pos="left">详细模式</div>'
|
|
|
+ +'<div id="entrelation-fullscreen" class="entrelation-box" title_pos="left">全屏</div>'
|
|
|
+'</div>'
|
|
|
);
|
|
|
+ //一般模式
|
|
|
+ $("#entrelation-pattern").click(function(){
|
|
|
+ thisClass.pattern();
|
|
|
+ });
|
|
|
+ //详细模式
|
|
|
+ $("#entrelation-verbosemode").click(function(){
|
|
|
+ thisClass.verbosemode();
|
|
|
+ });
|
|
|
+ //全屏
|
|
|
$("#entrelation-fullscreen").click(function(){
|
|
|
thisClass.initFullScreen();
|
|
|
});
|
|
|
@@ -83,6 +97,32 @@ Relation.prototype.init = function(){
|
|
|
this.makeRelation();
|
|
|
}catch(e){}
|
|
|
}
|
|
|
+Relation.prototype.pattern = function(){
|
|
|
+ if(this.modleFlag){
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ d3.selectAll("text").each(function (p){
|
|
|
+ if(p.type == "ce" || p.type == "e"){
|
|
|
+ $(this).text(p.shortText);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.modleFlag = true;
|
|
|
+ this.makeTextBg();
|
|
|
+ this.makeTitle();
|
|
|
+}
|
|
|
+Relation.prototype.verbosemode = function(){
|
|
|
+ if(!this.modleFlag){
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ d3.selectAll("text").each(function (p){
|
|
|
+ if(p.type == "ce" || p.type == "e"){
|
|
|
+ $(this).text(p.text);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.modleFlag = false;
|
|
|
+ this.makeTextBg();
|
|
|
+ this.makeTitle();
|
|
|
+}
|
|
|
Relation.prototype.dataProcess = function(){
|
|
|
var reg = new RegExp(/(有限公司|有限责任公司|股份有限公司|总公司|分公司|公司|事务所|合伙企业)$|\(.*\)|\（.*\）/g);
|
|
|
/*var provinces = [];
|
|
|
@@ -364,7 +404,6 @@ Relation.prototype.initFullScreen = function(){
|
|
|
document.mozFullScreenElement ||
|
|
|
document.webkitFullscreenElement ||
|
|
|
document.msFullscreenElement;
|
|
|
- $(".entrelation-fullscreen").toggleClass("exit");
|
|
|
if(!fullscreenElement || fullscreenElement==null){
|
|
|
this.redrawflag = true;
|
|
|
$("#entrelation-fullscreen").attr("title","退出全屏视图 (F11)");
|
|
|
@@ -454,10 +493,11 @@ Relation.prototype.removeNode = function(obj){
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
-Relation.prototype.tick = function(e){
|
|
|
+Relation.prototype.tick = function(){
|
|
|
var thisClass = this;
|
|
|
this.lines.attr("d", function(d){
|
|
|
- var sy = d.source.y,
|
|
|
+ var sx = d.source.x,
|
|
|
+ sy = d.source.y,
|
|
|
x = d.target.x,
|
|
|
y = d.target.y;
|
|
|
if(sy > y){
|
|
|
@@ -465,7 +505,7 @@ Relation.prototype.tick = function(e){
|
|
|
}else{
|
|
|
sy += 5;
|
|
|
}
|
|
|
- var line = new geo.LineSegment(d.source.x, sy, x, y);
|
|
|
+ var line = new geo.LineSegment(sx, sy, x, y);
|
|
|
for (var e in d.target.edge) {
|
|
|
var ix = line.intersect(d.target.edge[e].offset(x, y));
|
|
|
if (ix.in1 && ix.in2) {
|
|
|
@@ -474,18 +514,35 @@ Relation.prototype.tick = function(e){
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
- var dx = x - d.source.x,
|
|
|
+ var dx = x - sx,
|
|
|
dy = y - sy,
|
|
|
- dr = Math.sqrt(dx * dx + dy * dy),
|
|
|
+ dr = Math.sqrt(dx * dx + dy * dy);
|
|
|
theta = Math.atan2(dy, dx) + Math.PI / 7.85,
|
|
|
d90 = Math.PI / 2,
|
|
|
dtxs = x - Math.cos(theta),
|
|
|
dtys = y - Math.sin(theta);
|
|
|
- return "M" + d.source.x + "," + sy + "A" + dr + "," + dr + " 0 0 1," + x + "," + y + "A" + dr + "," + dr + " 0 0 0," + d.source.x + "," + sy + "M" + dtxs + "," + dtys + "l" + (3.5 * Math.cos(d90 - theta) - 10 * Math.cos(theta)) + "," + (-3.5 * Math.sin(d90 - theta) - 10 * Math.sin(theta)) + "L" + (dtxs - 3.5 * Math.cos(d90 - theta) - 10 * Math.cos(theta)) + "," + (dtys + 3.5 * Math.sin(d90 - theta) - 10 * Math.sin(theta)) + "z";
|
|
|
- });
|
|
|
+ var dd = 39;
|
|
|
+ //return "M" + sx + "," + sy + "A" + dr + " " + 2*dr + ",0 0 1," + x + "," + y;
|
|
|
+ return "M" + sx + "," + sy + "A" + dr + " " + 2*dr + ",0 0 1," + x + "," + y + "A" + dr + " " + 2*dr + ",0 0 0," + sx + "," + sy + "M" + dtxs + "," + dtys + "l" + (3.5 * Math.cos(d90 - theta) - 10 * Math.cos(theta)) + "," + (-3.5 * Math.sin(d90 - theta) - 10 * Math.sin(theta)) + "L" + (dtxs - 3.5 * Math.cos(d90 - theta) - 10 * Math.cos(theta)) + "," + (dtys + 3.5 * Math.sin(d90 - theta) - 10 * Math.sin(theta)) + "z";
|
|
|
+ });
|
|
|
this.nodes.attr("transform", function(d) {
|
|
|
+ if(thisClass.tickFlag && d.type == "ce"){
|
|
|
+ d.x = thisClass.centerNodeX;
|
|
|
+ d.y = thisClass.centerNodeY;
|
|
|
+ }
|
|
|
return "translate(" + d.x + "," + d.y + ")scale(" + thisClass.zoomlevel+ ")";
|
|
|
});
|
|
|
+ this.lineLables.attr("transform",function(d){
|
|
|
+ var sx = d.source.x,
|
|
|
+ sy = d.source.y,
|
|
|
+ x = d.target.x,
|
|
|
+ y = d.target.y;
|
|
|
+
|
|
|
+ return "translate("+(x)+","+(y)+")";
|
|
|
+ });
|
|
|
+ if(thisClass.tickFlag){
|
|
|
+ thisClass.force.tick();
|
|
|
+ }
|
|
|
}
|
|
|
Relation.prototype.zoomed = function() {
|
|
|
this.svg.attr("transform",
|
|
|
@@ -542,6 +599,7 @@ Relation.prototype.makeRelation = function(){
|
|
|
var dragstatus = false;
|
|
|
var drag = this.force.drag()
|
|
|
.on("dragstart",function(d,i){
|
|
|
+ thisClass.tickFlag = false;
|
|
|
d.fixed = true; //拖拽开始后设定被拖拽对象为固定
|
|
|
d3.event.sourceEvent.stopPropagation(); // Prevent panning
|
|
|
})
|
|
|
@@ -565,10 +623,11 @@ Relation.prototype.makeRelation = function(){
|
|
|
.attr("height", this.h)
|
|
|
.call(zoom)
|
|
|
.append("g");
|
|
|
- this.lines = this.svg.append("svg:g")
|
|
|
+ var gs = this.svg.append("svg:g")
|
|
|
.selectAll("path")
|
|
|
.data(this.force.links())
|
|
|
- .enter().append("path")
|
|
|
+ .enter();
|
|
|
+ this.lines = gs.append("path")
|
|
|
.style("fill", function(p){
|
|
|
return (p.type=="cp" || p.isLegal)?"#cd93d7":"#cecece";
|
|
|
})
|
|
|
@@ -578,6 +637,18 @@ Relation.prototype.makeRelation = function(){
|
|
|
.attr("stroke-width",function (e,i){
|
|
|
return e.linkVal;
|
|
|
});
|
|
|
+ this.lineLables = gs.append("g").each(function(){
|
|
|
+ d3.select(this).append("rect")
|
|
|
+ .attr("rx", 5)
|
|
|
+ .attr("ry", 5)
|
|
|
+ .attr("x", -99)
|
|
|
+ .attr("y", -18)
|
|
|
+ .attr("height", 20)
|
|
|
+ .attr("fill", "#1B9196")
|
|
|
+ .attr("stroke", "#1B9196");
|
|
|
+ d3.select(this).append("text").text("1000万元");
|
|
|
+ });
|
|
|
+
|
|
|
this.lines.each(function (d,i){
|
|
|
var invacconam = new Number(d.invacconam);
|
|
|
if(invacconam > 0){
|
|
|
@@ -608,7 +679,13 @@ Relation.prototype.makeRelation = function(){
|
|
|
this.nodes.append("rect")
|
|
|
.attr("rx", 5)
|
|
|
.attr("ry", 5)
|
|
|
- .attr('height', 20)
|
|
|
+ .attr('height', function(p){
|
|
|
+ if(p.type == "ce"){
|
|
|
+ return 25;
|
|
|
+ }else{
|
|
|
+ return 20;
|
|
|
+ }
|
|
|
+ })
|
|
|
.attr("fill", function(p){
|
|
|
if(p.type == "e" && (p.opstate == "11" || p.opstate == "07")){
|
|
|
return "#cecece";
|
|
|
@@ -626,10 +703,44 @@ Relation.prototype.makeRelation = function(){
|
|
|
}
|
|
|
return "1";
|
|
|
});
|
|
|
+ this.makeTitle();
|
|
|
+ this.nodes.append('text')
|
|
|
+ .text(function(d){
|
|
|
+ if(this.modleFlag){
|
|
|
+ return d.shortText;
|
|
|
+ }else{
|
|
|
+ return d.text;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .style("cursor",function (d,i){
|
|
|
+ if(d.type == "e"){
|
|
|
+ return "pointer";
|
|
|
+ }else{
|
|
|
+ return "auto";
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .style("font-size",function (d,i){
|
|
|
+ if(d.type == "ce"){
|
|
|
+ return "16px";
|
|
|
+ }else{
|
|
|
+ return "14px";
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .on("click",function (d,i){
|
|
|
+ if(!dragstatus && d.type == "e"){
|
|
|
+ window.open("/enterpriseInfoByRegNO/"+d.name+".html");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ thisClass.makeTextBg();
|
|
|
+ thisClass.force.start();
|
|
|
+ //var diagonal = d3.svg.diagonal().projection(function(d) { return [d.y, d.x]; });
|
|
|
+}
|
|
|
+Relation.prototype.makeTitle = function(){
|
|
|
+ var thisClass = this;
|
|
|
this.nodes.each(function (d,i){
|
|
|
if(d.type == "ce" || d.type == "e"){
|
|
|
var title = "";
|
|
|
- if(d.text != d.shortText){
|
|
|
+ if(thisClass.modleFlag){
|
|
|
title = d.text;
|
|
|
}
|
|
|
var regcap = d.regcap;
|
|
|
@@ -644,78 +755,70 @@ Relation.prototype.makeRelation = function(){
|
|
|
title += "注册资本："+regcap+"万元";
|
|
|
}
|
|
|
if(title != ""){
|
|
|
- d3.select(this).append("title").text(title);
|
|
|
+ if($(this).children("title").length == 0){
|
|
|
+ d3.select(this).append("title").text(title);
|
|
|
+ }else{
|
|
|
+ $(this).children("title").text(title);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
- this.nodes.append('text')
|
|
|
- .text(function(d){
|
|
|
- return d.shortText;
|
|
|
- })
|
|
|
- .style("cursor",function (d,i){
|
|
|
- if(d.type == "e"){
|
|
|
- return "pointer";
|
|
|
- }else{
|
|
|
- return "auto";
|
|
|
- }
|
|
|
- })
|
|
|
- .on("click",function (d,i){
|
|
|
- if(!dragstatus && d.type == "e"){
|
|
|
- window.open("/enterpriseInfoByRegNO/"+d.name+".html");
|
|
|
- }
|
|
|
- });
|
|
|
- setTimeout(function() {
|
|
|
- thisClass.nodes.each(function(d) {
|
|
|
- var node = d3.select(this),
|
|
|
- text = node.selectAll('text'),
|
|
|
- bounds = {},
|
|
|
- first = true;
|
|
|
-
|
|
|
- text.each(function() {
|
|
|
- var box = this.getBBox();
|
|
|
- if (first || box.x < bounds.x1) {
|
|
|
- bounds.x1 = box.x;
|
|
|
- }
|
|
|
- if (first || box.y < bounds.y1) {
|
|
|
- bounds.y1 = box.y;
|
|
|
- }
|
|
|
- if (first || box.x + box.width > bounds.x2) {
|
|
|
- bounds.x2 = box.x + box.width;
|
|
|
- }
|
|
|
- if (first || box.y + box.height > bounds.y2) {
|
|
|
- bounds.y2 = box.y + box.height;
|
|
|
- }
|
|
|
- first = false;
|
|
|
- }).attr('text-anchor', 'middle');
|
|
|
-
|
|
|
- var padding = {"left":3,"right":3,"top":2,"bottom":2},
|
|
|
- margin = {"left":3,"right":3,"top":2,"bottom":2},
|
|
|
- oldWidth = bounds.x2 - bounds.x1;
|
|
|
-
|
|
|
- bounds.x1 -= oldWidth / 2;
|
|
|
- bounds.x2 -= oldWidth / 2;
|
|
|
-
|
|
|
- bounds.x1 -= padding.left;
|
|
|
- bounds.y1 -= padding.top;
|
|
|
- bounds.x2 += padding.left + padding.right;
|
|
|
- bounds.y2 += padding.top + padding.bottom;
|
|
|
+}
|
|
|
+Relation.prototype.makeTextBg = function(){
|
|
|
+ var thisClass = this;
|
|
|
+ this.nodes.each(function(d) {
|
|
|
+ var node = d3.select(this),
|
|
|
+ text = node.selectAll('text'),
|
|
|
+ bounds = {},
|
|
|
+ first = true;
|
|
|
|
|
|
- var width = bounds.x2 - bounds.x1;
|
|
|
- var height = bounds.y2 - bounds.y1;
|
|
|
- node.select('rect')
|
|
|
- .attr('x', bounds.x1)
|
|
|
- .attr('y', bounds.y1)
|
|
|
- //.attr('height', height)
|
|
|
- .attr('width', width);
|
|
|
-
|
|
|
- d.edge = {
|
|
|
- left : new geo.LineSegment(bounds.x1, bounds.y1, bounds.x1, bounds.y2),
|
|
|
- right : new geo.LineSegment(bounds.x2, bounds.y1, bounds.x2, bounds.y2),
|
|
|
- top : new geo.LineSegment(bounds.x1, bounds.y1, bounds.x2, bounds.y1),
|
|
|
- bottom : new geo.LineSegment(bounds.x1, bounds.y2, bounds.x2, bounds.y2)
|
|
|
- };
|
|
|
- });
|
|
|
- thisClass.force.start();
|
|
|
- },10);
|
|
|
- //var diagonal = d3.svg.diagonal().projection(function(d) { return [d.y, d.x]; });
|
|
|
+ text.each(function() {
|
|
|
+ var box = this.getBBox();
|
|
|
+ box.x = 0;
|
|
|
+ if (first || box.x < bounds.x1) {
|
|
|
+ bounds.x1 = box.x;
|
|
|
+ }
|
|
|
+ if (first || box.y < bounds.y1) {
|
|
|
+ bounds.y1 = box.y;
|
|
|
+ }
|
|
|
+ if (first || box.x + box.width > bounds.x2) {
|
|
|
+ bounds.x2 = box.x + box.width;
|
|
|
+ }
|
|
|
+ if (first || box.y + box.height > bounds.y2) {
|
|
|
+ bounds.y2 = box.y + box.height;
|
|
|
+ }
|
|
|
+ first = false;
|
|
|
+ }).attr('text-anchor', 'middle');
|
|
|
+
|
|
|
+ var padding = {"left":3,"right":3,"top":2,"bottom":2},
|
|
|
+ margin = {"left":3,"right":3,"top":2,"bottom":2},
|
|
|
+ oldWidth = bounds.x2 - bounds.x1;
|
|
|
+
|
|
|
+ bounds.x1 -= oldWidth / 2;
|
|
|
+ bounds.x2 -= oldWidth / 2;
|
|
|
+
|
|
|
+ bounds.x1 -= padding.left;
|
|
|
+ bounds.y1 -= padding.top;
|
|
|
+ bounds.x2 += padding.left + padding.right;
|
|
|
+ bounds.y2 += padding.top + padding.bottom;
|
|
|
+
|
|
|
+ var width = bounds.x2 - bounds.x1;
|
|
|
+ if(d.type == "ce"){
|
|
|
+ thisClass.centerNodeX = thisClass.w / 2;
|
|
|
+ thisClass.centerNodeY = thisClass.h / 2 + 5;
|
|
|
+ }
|
|
|
+ var height = bounds.y2 - bounds.y1;
|
|
|
+ node.select('rect')
|
|
|
+ .attr('x', bounds.x1)
|
|
|
+ .attr('y', bounds.y1)
|
|
|
+ //.attr('height', height)
|
|
|
+ .attr('width', width);
|
|
|
+
|
|
|
+ d.edge = {
|
|
|
+ left : new geo.LineSegment(bounds.x1, bounds.y1, bounds.x1, bounds.y2),
|
|
|
+ right : new geo.LineSegment(bounds.x2, bounds.y1, bounds.x2, bounds.y2),
|
|
|
+ top : new geo.LineSegment(bounds.x1, bounds.y1, bounds.x2, bounds.y1),
|
|
|
+ bottom : new geo.LineSegment(bounds.x1, bounds.y2, bounds.x2, bounds.y2)
|
|
|
+ };
|
|
|
+ });
|
|
|
}
|
