$(document).ready(function(){ var isIE=('null'!=chechBrowser().match('IE'))|('null'!=chechBrowser().match('Firefox'))?true:false; var shadowNum=0; var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height"), g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + (height / 2 - 40) + ")"); var stratify = d3.stratify().parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); }); var cluster = d3.cluster().size([360, width / 2 - 120]); //d3.csv("flare.csv", function(error, data) { d3.json("webEPJson.do?eepyId=3f85870a-ca4c-4297-9060-e42f196b5bb3", function(error, data) { if (error) throw error; var root = stratify(data).sort(function(a, b) { return a.height - b.height || a.id.localeCompare(b.id); }); cluster(root); /** 線段 **/ var link = g.selectAll(".link") .data(root.descendants().slice(1)) .enter().append("path") .attr("class", "link") .attr("d", function(d) { return "M" + project(d.x, d.y) + "L" /*+ project(d.x, (d.y + d.parent.y) / 2) + " " + project(d.parent.x, (d.y + d.parent.y) / 2)*/ + " " + project(d.parent.x, d.parent.y); }); /** 物件位置 **/ var node = g.selectAll(".node") .data(root.descendants()) .enter().append("g") .attr("class", function(d) { var level_num=(d.id.match(/\./g) || []).length; if( 0==level_num ){ return "node main"; }else if( 1==level_num ){ return "node level1"; }else if( 2==level_num ){ return "node level2"; }else{ return "node level3"; } }) .attr("transform", function(d) { return "translate(" + project(d.x, d.y) + ")"; }); /** 圓形 [Start] **/ createCircleShadow(node); node.append("circle") .attr("cy", "5px") .attr("filter", "url('#circle_"+shadowNum+"')") .attr("r", function(d) { var level_num=(d.id.match(/\./g) || []).length; if( 0==level_num ){ //return 65; return 63; }else if( 1==level_num ){ //return 45; return 50; }else if( 2==level_num ){ //return 40; return 44; }else{ return 38; } }) .attr("class", function(d) { return "circle_"+d.data.class_name; }); /** 圓形 [End] **/ /** 文字 [Start] **/ svgTextCuter( node ); //createTextShadow(node); /*if( isIE ){ node.append("text").text(function(d) { return d.data.name.split(" ")[0]; }) .attr("class", function(d) { return "text_"+d.data.class_name; }) .attr("text-anchor", "middle").attr("width", "100%") .on("click", function(){ window.open("http://www.google.com","_blank"); console.log( $(this).text() ); }); node.append("text") .attr("dy", function(d){ var level_num=(d.id.match(/\./g) || []).length; if( 0==level_num | 1==level_num | 2==level_num ){ return "1.5em"; }else{ return "1.6em"; } }) .text(function(d) { return d.data.name.split(" ")[1]; }) .attr("class", function(d) { return "text_"+d.data.class_name; }) .attr("text-anchor", "middle").attr("width", "100%") .on("click", function(){ window.open("http://www.google.com","_blank"); console.log( $(this).text() ); }); }else{ node.append("text").text(function(d) { return d.data.name.split(" ")[0]; }) .attr("class", function(d) { return "text_"+d.data.class_name; }) .attr("x", function(d) { return "-"+$(this).width()/2+"px"; }) .on("click", function(){ window.open("http://www.google.com","_blank"); console.log( $(this).text() ); }); node.append("text") .attr("dy", function(d){ var level_num=(d.id.match(/\./g) || []).length; if( 0==level_num | 1==level_num | 2==level_num ){ return "1.5em"; }else{ return "1.6em"; } }) .text(function(d) { return d.data.name.split(" ")[1]; }) .attr("class", function(d) { return "text_"+d.data.class_name; }) .attr("x", function(d) { return "-"+$(this).width()/2+"px"; }) .on("click", function(){ window.open("http://www.google.com","_blank"); console.log( $(this).text() ); }); }*/ /** 文字 [End] **/ shadowNum++; }); function project(x, y) { var angle = (x - 90) / 180 * Math.PI, radius = y; return [radius * Math.cos(angle), radius * Math.sin(angle)]; } function createCircleShadow(node){ var defs=node.append("defs") /** Circle **/ var filter=defs.append("filter") .attr("id", "circle_"+shadowNum) .attr("x", "-10%").attr("y", "-10%") .attr("height", "200%").attr("width", "200%"); filter.append("feOffset") .attr("result", "offOut") .attr("in", "SourceGraphic") .attr("dx", "5").attr("dy", "5"); filter.append("feGaussianBlur") .attr("result", "blurOut") .attr("in", "offOut") .attr("stdDeviation", "5"); filter.append("feBlend") .attr("in", "SourceGraphic") .attr("in2", "blurOut") .attr("mode", "normal"); } function createTextShadow(node){ if( isIE ){ node.append("text").text(function(d) { return d.data.name.replace(/ /, " ").split(" ")[0]; }).attr("dy", "0.05em").attr("dx", "0.05em").attr("class", function(d) { return "textShadow_"+d.data.class_name; }).attr("text-anchor", "middle").attr("width", "100%"); node.append("text").text(function(d) { return d.data.name.replace(/ /, " ").split(" ")[0]; }).attr("dy", "-0.05em").attr("dx", "0.05em").attr("class", function(d) { return "textShadow_"+d.data.class_name; }).attr("text-anchor", "middle").attr("width", "100%"); node.append("text").text(function(d) { return d.data.name.replace(/ /, " ").split(" ")[0]; }).attr("dy", "0.05em").attr("dx", "-0.05em").attr("class", function(d) { return "textShadow_"+d.data.class_name; }).attr("text-anchor", "middle").attr("width", "100%"); node.append("text").text(function(d) { return d.data.name.replace(/ /, " ").split(" ")[0]; }).attr("dy", "-0.05em").attr("dx", "-0.05em").attr("class", function(d) { return "textShadow_"+d.data.class_name; }).attr("text-anchor", "middle").attr("width", "100%"); node.append("text").text(function(d) { return d.data.name.replace(/ /, " ").split(" ")[1]; }).attr("dy", function(d){ var level_num=(d.id.match(/\./g) || []).length; if( 0==level_num | 1==level_num | 2==level_num ){ return "1.55em"; }else{ return "1.60em"; }}).attr("dx", "0.05em").attr("class", function(d) { return "textShadow_"+d.data.class_name; }).attr("text-anchor", "middle").attr("width", "100%"); node.append("text").text(function(d) { return d.data.name.replace(/ /, " ").split(" ")[1]; }).attr("dy", function(d){ var level_num=(d.id.match(/\./g) || []).length; if( 0==level_num | 1==level_num | 2==level_num ){ return "1.45em"; }else{ return "1.55em"; }}).attr("dx", "0.05em").attr("class", function(d) { return "textShadow_"+d.data.class_name; }).attr("text-anchor", "middle").attr("width", "100%"); node.append("text").text(function(d) { return d.data.name.replace(/ /, " ").split(" ")[1]; }).attr("dy", function(d){ var level_num=(d.id.match(/\./g) || []).length; if( 0==level_num | 1==level_num | 2==level_num ){ return "1.55em"; }else{ return "1.65em"; }}).attr("dx", "-0.05em").attr("class", function(d) { return "textShadow_"+d.data.class_name; }).attr("text-anchor", "middle").attr("width", "100%"); node.append("text").text(function(d) { return d.data.name.replace(/ /, " ").split(" ")[1]; }).attr("dy", function(d){ var level_num=(d.id.match(/\./g) || []).length; if( 0==level_num | 1==level_num | 2==level_num ){ return "1.45em"; }else{ return "1.55em"; }}).attr("dx", "-0.05em").attr("class", function(d) { return "textShadow_"+d.data.class_name; }).attr("text-anchor", "middle").attr("width", "100%"); }else{ node.append("text").text(function(d) { return d.data.name.replace(/ /, " ").split(" ")[0]; }).attr("dy", "0.05em").attr("dx", "0.05em").attr("class", function(d) { return "textShadow_"+d.data.class_name; }).attr("x", function(d) { return "-"+$(this).width()/2+"px"; }); node.append("text").text(function(d) { return d.data.name.replace(/ /, " ").split(" ")[0]; }).attr("dy", "-0.05em").attr("dx", "0.05em").attr("class", function(d) { return "textShadow_"+d.data.class_name; }).attr("x", function(d) { return "-"+$(this).width()/2+"px"; }); node.append("text").text(function(d) { return d.data.name.replace(/ /, " ").split(" ")[0]; }).attr("dy", "0.05em").attr("dx", "-0.05em").attr("class", function(d) { return "textShadow_"+d.data.class_name; }).attr("x", function(d) { return "-"+$(this).width()/2+"px"; }); node.append("text").text(function(d) { return d.data.name.replace(/ /, " ").split(" ")[0]; }).attr("dy", "-0.05em").attr("dx", "-0.05em").attr("class", function(d) { return "textShadow_"+d.data.class_name; }).attr("x", function(d) { return "-"+$(this).width()/2+"px"; }); node.append("text").text(function(d) { return d.data.name.replace(/ /, " ").split(" ")[1]; }).attr("dy", function(d){ var level_num=(d.id.match(/\./g) || []).length; if( 0==level_num | 1==level_num | 2==level_num ){ return "1.55em"; }else{ return "1.60em"; }}).attr("dx", "0.05em").attr("class", function(d) { return "textShadow_"+d.data.class_name; }).attr("x", function(d) { return "-"+$(this).width()/2+"px"; }); node.append("text").text(function(d) { return d.data.name.replace(/ /, " ").split(" ")[1]; }).attr("dy", function(d){ var level_num=(d.id.match(/\./g) || []).length; if( 0==level_num | 1==level_num | 2==level_num ){ return "1.45em"; }else{ return "1.55em"; }}).attr("dx", "0.05em").attr("class", function(d) { return "textShadow_"+d.data.class_name; }).attr("x", function(d) { return "-"+$(this).width()/2+"px"; }); node.append("text").text(function(d) { return d.data.name.replace(/ /, " ").split(" ")[1]; }).attr("dy", function(d){ var level_num=(d.id.match(/\./g) || []).length; if( 0==level_num | 1==level_num | 2==level_num ){ return "1.55em"; }else{ return "1.65em"; }}).attr("dx", "-0.05em").attr("class", function(d) { return "textShadow_"+d.data.class_name; }).attr("x", function(d) { return "-"+$(this).width()/2+"px"; }); node.append("text").text(function(d) { return d.data.name.replace(/ /, " ").split(" ")[1]; }).attr("dy", function(d){ var level_num=(d.id.match(/\./g) || []).length; if( 0==level_num | 1==level_num | 2==level_num ){ return "1.45em"; }else{ return "1.55em"; }}).attr("dx", "-0.05em").attr("class", function(d) { return "textShadow_"+d.data.class_name; }).attr("x", function(d) { return "-"+$(this).width()/2+"px"; }); } } /** 裁切 **/ var rowNum=7; function svgTextCuter( node ){ if( isIE ){ node.on("click", function(d){ location.href = d.data.linkUrl; }); node.append("text").text(function(d) { return d.data.name.replace(/ /, " ").split(" ")[0]; }).attr("y", function(d) { return 1