devbox
你好赵伟
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

d3.js关系图_js 关系图

作者：你好赵伟 | 2024-05-13 09:33:00

赞

踩

js 关系图

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <style>
  6.         .nodetext {
  7.             font-size: 12px;
  8.             font-family: SimSun;
  9.             fill: #000000;
  10.         }
  11.  
  12.  
  13.         .tooltip {
  14.             height: auto;
  15.             font-family: simsun;
  16.             font-size: 14px;
  17.             text-align: center;
  18.         }
  19.  
  20.         select#lineFontType.form-control,
  21.         select#nodesFontType.form-control {
  22.             width: 184px;
  23.         }
  24.  
  25.         .layout-split-east {
  26.             border-left: 5px solid #E6EEF8;
  27.         }
  28.     </style>
  29.     <base href="<%=basePath%>">
  30.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  31.     <meta name="viewport" content="width=device-width, initial-scale=1">
  32.     <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
  33.     <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  34. </head>
  35.  
  36. <body>
  37.     <!-- 力导向图div -->
  38.     <div id="divid"></div>
  39.     <script>
  40.  
  41.         $(document).ready(function () {
  42.             showChart();
  43.         })
  44.  
  45.         function showChart() {
  46.             var data = {
  47.                 "links": [
  48.                     { "source": "陆洋", "target": "建银国际产业基金管理有限公司", "relation": "副董事长大人", "sourceId": "", "targetId": "", "sourceImg": "http://mail.tom.com/error/i2.gif", "targetImg": "", "sourceColor": "", "targetColor": "", "sourceRadius": "30", "targetRadius": "45", "lineColor": "#458B00" },
  49.                     { "source": "汪红辉", "target": "乾行文化投资公司", "relation": "总经理", "sourceId": "", "targetId": "", "sourceImg": "", "targetImg": "", "sourceColor": "", "targetColor": "#00FF00", "sourceRadius": "30", "targetRadius": "40", "lineColor": "#EEEE00" },
  50.                     { "source": "汪红辉", "target": "天津裕丰股权投资管理有限公司", "relation": "董事", "sourceId": "", "targetId": "", "sourceImg": "", "targetImg": "", "sourceColor": "", "targetColor": "", "sourceRadius": "30", "targetRadius": "42", "lineColor": "#0000CD" },
  51.                     { "source": "汪红辉", "target": "乾行文化投资公司", "relation": "法人", "sourceId": "", "targetId": "", "sourceImg": "", "targetImg": "", "sourceColor": "", "targetColor": "", "sourceRadius": "30", "targetRadius": "40", "lineColor": "#9AC0CD" },
  52.                     { "source": "汪红辉", "target": "乾行文化投资公司", "relation": "董事长", "sourceId": "", "targetId": "", "sourceImg": "", "targetImg": "", "sourceColor": "", "targetColor": "", "sourceRadius": "30", "targetRadius": "40", "lineColor": "#CD4F39" },
  53.                     { "source": "汪红辉", "target": "建银国际产业基金管理有限公司", "relation": "董事", "sourceId": "", "targetId": "", "sourceImg": "", "targetImg": "", "sourceColor": "", "targetColor": "", "sourceRadius": "30", "targetRadius": "45", "lineColor": "#0000CD" },
  54.                     { "source": "胡章宏", "target": "建银国际产业基金管理有限公司", "relation": "董事长", "sourceId": "", "targetId": "", "sourceImg": "", "targetImg": "", "sourceColor": "", "targetColor": "", "sourceRadius": "30", "targetRadius": "45", "lineColor": "#CD4F39" },
  55.                     { "source": "建银国际产业基金管理有限公司", "target": "胡章宏", "relation": "法人", "sourceId": "", "targetId": "", "sourceImg": "", "targetImg": "", "sourceColor": "", "targetColor": "", "sourceRadius": "45", "targetRadius": "30", "lineColor": "#9AC0CD" }
  56.                 ]
  57.             };
  58.             var options = {};
  59.             options.backgroundColor = "#D1EEEE";
  60.             options.nodesFontType = "SimSun";
  61.             options.nodesFontSize = 20;
  62.             options.lineFontType = "SimHei";
  63.             options.lineFontSize = 12;
  64.             options.lineColor = "#000000";
  65.             options.showExamples = true;
  66.             options.examplesX = 20;
  67.             options.examplesY = 450;
  68.             options.examplesFontColor = "#000000";
  69.             drawChart("divid", options, data);
  70.         }
  71.  
  72.  
  73.         function drawChart(divid, options, datas, dataFilter) {
  74.             var backgroundColor = options.backgroundColor; //背景颜色
  75.             var nodesFontType = options.nodesFontType; //节点字体
  76.             var nodesFontSize = options.nodesFontSize; //节点字号
  77.             var lineFontType = options.lineFontType; //关系字体
  78.             var lineFontSize = options.lineFontSize; //关系字号
  79.             var lineColor = options.lineColor; //连线颜色
  80.             var examplesFontColor = options.examplesFontColor; //关系示例字体颜色
  81.  
  82.             var width = 800; //画布宽
  83.             var height = 500; //画布高
  84.             var svgChart = d3.select("svg");
  85.             svgChart.remove();
  86.  
  87.             var tip = $(".tooltip");
  88.             if (tip.length > 0) {
  89.                 tip.remove();
  90.             }
  91.  
  92.  
  93.             var sourceDatas = {};
  94.             sourceDatas.links = [];
  95.             for (var i = 0; i < datas.links.length; i++) {
  96.                 var jsonObj = {};
  97.                 jsonObj.source = datas.links[i].source;
  98.                 jsonObj.target = datas.links[i].target;
  99.                 jsonObj.relation = datas.links[i].relation;
  100.                 jsonObj.sourceId = datas.links[i].sourceId;
  101.                 jsonObj.targetId = datas.links[i].targetId;
  102.                 jsonObj.sourceImg = datas.links[i].sourceImg;
  103.                 jsonObj.targetImg = datas.links[i].targetImg;
  104.                 jsonObj.sourceColor = datas.links[i].sourceColor;
  105.                 jsonObj.targetColor = datas.links[i].targetColor;
  106.                 jsonObj.sourceRadius = datas.links[i].sourceRadius;
  107.                 jsonObj.targetRadius = datas.links[i].targetRadius;
  108.                 jsonObj.lineColor = datas.links[i].lineColor;
  109.                 sourceDatas.links.push(jsonObj);
  110.             }
  111.             var resourceLinks = sourceDatas.links;
  112.  
  113.  
  114.             if (dataFilter != undefined && dataFilter.length > 0) {
  115.                 var indexArray = [];
  116.                 for (var i = 0; i < dataFilter.length; i++) {
  117.                     for (var j = 0; j < resourceLinks.length; j++) {
  118.                         if (resourceLinks[j].relation == dataFilter[i].relation && dataFilter[i].isShow == "false") {
  119.                             indexArray.push(j);
  120.                         }
  121.                     }
  122.                 }
  123.                 if (indexArray.length > 0) {
  124.                     var tempArray = [];
  125.                     for (var j = 0; j < resourceLinks.length; j++) {
  126.                         for (var i = 0; i < indexArray.length; i++) {
  127.                             if (indexArray[i] != j) {
  128.                                 if (i == indexArray.length - 1) {
  129.                                     tempArray.push(resourceLinks[j]);
  130.                                     break;
  131.                                 }
  132.                                 continue;
  133.                             } else {
  134.                                 break;
  135.                             }
  136.  
  137.                         }
  138.                     }
  139.                     resourceLinks = tempArray;
  140.                 }
  141.             }
  142.             var links = resourceLinks;
  143.  
  144.             //关系分组  
  145.             var linkGroup = {};
  146.             //对连接线进行统计和分组，不区分连接线的方向，只要属于同两个实体，即认为是同一组  
  147.             var linkmap = {};
  148.             for (var i = 0; i < links.length; i++) {
  149.                 var key = links[i].source < links[i].target ? links[i].source + ':' + links[i].target : links[i].target + ':' + links[i].source;
  150.                 if (!linkmap.hasOwnProperty(key)) {
  151.                     linkmap[key] = 0;
  152.                 }
  153.                 linkmap[key] += 1;
  154.                 if (!linkGroup.hasOwnProperty(key)) {
  155.                     linkGroup[key] = [];
  156.                 }
  157.                 linkGroup[key].push(links[i]);
  158.             }
  159.             //为每一条连接线分配size属性，同时对每一组连接线进行编号  
  160.             for (var i = 0; i < links.length; i++) {
  161.                 var key = links[i].source < links[i].target ? links[i].source + ':' + links[i].target : links[i].target + ':' + links[i].source;
  162.                 links[i].size = linkmap[key];
  163.                 //同一组的关系进行编号  
  164.                 var group = linkGroup[key];
  165.                 //给节点分配编号  
  166.                 setLinkNumber(group);
  167.             }
  168.  
  169.             //节点
  170.             var nodes = {};
  171.             //关系对应颜色
  172.             var relationColor = {};
  173.  
  174.             for (var i = 0; i < links.length; i++) {
  175.                 links[i].source = nodes[links[i].source] || (nodes[links[i].source] = { name: links[i].source, color: links[i].sourceColor, image: links[i].sourceImg, radius: links[i].sourceRadius });
  176.                 links[i].target = nodes[links[i].target] || (nodes[links[i].target] = { name: links[i].target, color: links[i].targetColor, image: links[i].targetImg, radius: links[i].targetRadius });
  177.             }
  178.  
  179.             var sourceData = datas.links;
  180.             for (var i = 0; i < sourceData.length; i++) {
  181.                 relationColor[sourceData[i].relation] = { "relation": sourceData[i].relation, "lineColor": sourceData[i].lineColor };
  182.             }
  183.  
  184.  
  185.             nodes = d3.values(nodes);
  186.             relationColor = d3.values(relationColor);
  187.  
  188.             var examples_x = parseFloat(options.examplesX); //关系示例坐标x
  189.             var examples_y = parseFloat(options.examplesY); //关系示例坐标y
  190.             var examplesLength = 80;
  191.             var examplesSize = Math.floor((width - examples_x) / examplesLength);
  192.             var examplesRow = relationColor.length % examplesSize == 0 ? relationColor.length / examplesSize : Math.ceil(relationColor.length / examplesSize);
  193.             //计算关系示列位置
  194.             for (var i = 1; i <= relationColor.length; i++) {
  195.                 var num = i % examplesSize == 0 ? examplesSize : i % examplesSize;
  196.                 relationColor[i - 1].x = examples_x + (num - 1) * examplesLength;
  197.                 relationColor[i - 1].y = examples_y + 20 * Math.ceil(i / examplesSize);
  198.             }
  199.             if (dataFilter == undefined) {
  200.                 dataFilter = [];
  201.                 for (var i = 0; i < relationColor.length; i++) {
  202.                     dataFilter.push({ "relation": relationColor[i].relation, "isShow": "true" });
  203.                 }
  204.             }
  205.  
  206.  
  207.             //绑定相连节点
  208.             for (var i = 0; i < nodes.length; i++) {
  209.                 for (var j = 0; j < links.length; j++) {
  210.                     if (nodes[i].name == links[j].source.name) {
  211.                         nodes[i][links[j].target.name] = { name: links[j].target.name };
  212.                     }
  213.                     if (nodes[i].name == links[j].target.name) {
  214.                         nodes[i][links[j].source.name] = { name: links[j].source.name };
  215.                     }
  216.                 }
  217.             }
  218.  
  219.             var svg = d3.select("#" + divid).append("svg")
  220.                 .attr("width", width)
  221.                 .attr("height", height)
  222.                 .attr("style", "background-color:" + backgroundColor);
  223.             if (options.showExamples == "true") {
  224.                 var examples = svg.selectAll(".examples")
  225.                     .data(relationColor)
  226.                     .enter()
  227.                     .append("svg:g")
  228.                     .attr("fill-opacity", function (d) {
  229.                         for (var i = 0; i < dataFilter.length; i++) {
  230.                             if (d.relation == dataFilter[i].relation && dataFilter[i].isShow == "false") {
  231.                                 return 0.2;
  232.                             }
  233.                         }
  234.                         return 1;
  235.                     })
  236.                     .on("click", function (d) {
  237.                         for (var i = 0; i < dataFilter.length; i++) {
  238.                             if (dataFilter[i].relation == d.relation) {
  239.                                 if (dataFilter[i].isShow == "true") {
  240.                                     dataFilter[i].isShow = "false";
  241.                                 } else {
  242.                                     dataFilter[i].isShow = "true";
  243.                                 }
  244.                             }
  245.                         }
  246.                         drawChart(divid, options, datas, dataFilter);
  247.                     });
  248.  
  249.  
  250.                 examples.append("svg:path")
  251.                     .attr("d", function (d) {
  252.                         var x1 = d.x;
  253.                         var y1 = d.y;
  254.                         var x2 = x1 + 20;
  255.                         var y2 = y1;
  256.                         return 'M' + x1 + ' ' + y1 + ' L ' + x2 + ' ' + y2;
  257.                     })
  258.                     .style("stroke", function (d) {
  259.                         if (d.lineColor == "") {
  260.                             return lineColor;
  261.                         } else {
  262.                             return d.lineColor;
  263.                         }
  264.                     })
  265.                     .style("stroke-width", 2.5);
  266.                 examples.append("svg:text")
  267.                     .style("font-size", "14px")
  268.                     .style("fill", examplesFontColor)
  269.                     .attr("x", function (d) {
  270.                         if (d.relation.length > 3) {
  271.                             return d.x + 20 + 14 * 4 / 2;
  272.                         }
  273.                         return d.x + 20 + 14 * d.relation.length / 2;
  274.                     })
  275.                     .attr("y", function (d) {
  276.                         return d.y + 5;
  277.                     })
  278.                     .attr('text-anchor', "middle")
  279.                     .text(function (d) {
  280.                         if (d.relation.length > 3) {
  281.                             return d.relation.substring(0, 3) + "...";
  282.                         }
  283.                         return d.relation;
  284.                     })
  285.                     .on("mouseover", function (d) {
  286.                         tooltip.html("<span>" + d.relation + "</span>")
  287.                             .style("left", (d3.event.pageX) + "px")
  288.                             .style("top", (d3.event.pageY + 20) + "px")
  289.                             .style("display", "block")
  290.                             .style("position", "absolute")
  291.                             .style("opacity", 1.0);
  292.                     })
  293.                     .on("mouseout", function (d, i) {
  294.                         tooltip.style("opacity", 0.0);
  295.                     });
  296.             }
  297.  
  298.  
  299.  
  300.             //D3力导向布局
  301.             var force = d3.layout.force()
  302.                 .nodes(nodes)
  303.                 .links(links)
  304.                 .size([width, height])
  305.                 .linkDistance(200)
  306.                 .charge(-1500)
  307.                 .start();
  308.  
  309.  
  310.             //边             
  311.             var edges_path = svg.selectAll(".edgepath")
  312.                 .data(links)
  313.                 .enter()
  314.                 .append("path")
  315.                 .attr("marker-end", function (d, i) {
  316.                     var arrowMarker = svg.append("marker")
  317.                         .attr("id", "arrow" + i)
  318.                         .attr("markerUnits", "userSpaceOnUse")
  319.                         .attr("markerWidth", "16")
  320.                         .attr("markerHeight", "15")
  321.                         .attr("viewBox", "0 0 12 12")
  322.                         .attr("refX", 9)
  323.                         .attr("refY", 6)
  324.                         .attr("orient", "auto")
  325.                         .append("svg:path")
  326.                         .attr("d", "M2,2 L10,6 L2,10 L6,6 L2,2")
  327.                         .attr("fill", function () {
  328.                             return d.lineColor = "" ? lineColor : d.lineColor;
  329.                         });
  330.  
  331.                     return "url(#arrow" + i + ")";
  332.                 })
  333.                 .style("stroke", function (d) {
  334.                     if (d.lineColor == "") {
  335.                         return lineColor;
  336.                     } else {
  337.                         return d.lineColor;
  338.                     }
  339.                 })
  340.                 .style("stroke-width", 1.5)
  341.                 .on("mouseover", function (d) {
  342.                     //影藏其它连线上文字
  343.                     edges_text.style("fill-opacity", function (edge) {
  344.                         if (edge === d) {
  345.                             return 1;
  346.                         }
  347.                         return 0;
  348.                     })
  349.                     edges_path.style("stroke-width", function (edge) {
  350.                         if (edge === d) {
  351.                             return 4;
  352.                         }
  353.                         return 1.5;
  354.                     })
  355.                 })
  356.                 .on("mouseout", function (d, i) {
  357.                     //显示连线上的文字
  358.                     edges_text.style("fill-opacity", 1);
  359.                     edges_path.style("stroke-width", 1.5);
  360.                 });
  361.  
  362.  
  363.             //边上的文字（人物之间的关系）            
  364.             var edges_text = svg.selectAll(".linetext")
  365.                 .data(links)
  366.                 .enter()
  367.                 .append("svg:g")
  368.                 .attr("class", "linetext")
  369.                 .attr("fill-opacity", 1);
  370.             edges_text.append("svg:text")
  371.                 .style("font-size", (lineFontSize + "px"))
  372.                 .style("font-family", lineFontType)
  373.                 .style("fill", "#000000")
  374.                 .attr("y", ".31em")
  375.                 .attr('text-anchor', "middle")
  376.                 .text(function (d) {
  377.                     return d.relation;
  378.                 });
  379.  
  380.             edges_text.insert('rect', 'text')
  381.                 .attr('width', function (d) {
  382.                     return d.relation.length * lineFontSize;
  383.                 })
  384.                 .attr('height', function (d) {
  385.                     return lineFontSize;
  386.                 })
  387.                 .attr("y", "-.6em")
  388.                 .attr('x', function (d) {
  389.                     return -d.relation.length * lineFontSize / 2;
  390.                 })
  391.                 .style('fill', '#fff');
  392.  
  393.             // 圆形图片节点（人物头像）
  394.             var circle = svg.selectAll("circle")
  395.                 .data(nodes)
  396.                 .enter()
  397.                 .append("circle")
  398.                 .style("stroke", function (d) {
  399.                     if (d.color == "") {
  400.                         return "#EE8262";
  401.                     }
  402.                     return d.color;
  403.                 })
  404.                 .style("stroke-width", "2px")
  405.                 .attr("r", function (d) {
  406.                     return d.radius;
  407.                 })
  408.                 .attr("fill", function (d, i) {
  409.                     //节点图片不为空是添加背景色
  410.                     if (d.image == "") {
  411.                         if (d.color == "") {
  412.                             return "#EE8262";
  413.                         }
  414.                         return d.color;
  415.                     } else {
  416.                         //创建圆形图片
  417.                         var defs = svg.append("defs").attr("id", "imgdefs")
  418.  
  419.                         var catpattern = defs.append("pattern")
  420.                             .attr("id", "catpattern" + i)
  421.                             .attr("height", 1)
  422.                             .attr("width", 1)
  423.  
  424.                         catpattern.append("image")
  425.                             /* .attr("x", - (img_w / 2 - radius))
  426.                             .attr("y", - (img_h / 2 - radius)) */
  427.                             .attr("width", d.radius * 2)
  428.                             .attr("height", d.radius * 2)
  429.                             .attr("xlink:href", d.image)
  430.  
  431.                         return "url(#catpattern" + i + ")";
  432.                     }
  433.  
  434.                 })
  435.                 .on("mouseover", function (d, i) {
  436.                     //影藏其它连线上文字
  437.                     edges_text.style("fill-opacity", function (edge) {
  438.                         if (edge.source === d || edge.target === d) {
  439.                             return 1;
  440.                         }
  441.                         if (edge.source !== d && edge.target !== d) {
  442.                             return 0;
  443.                         }
  444.                     })
  445.                     //其它节点亮度调低
  446.                     circle.style("opacity", function (edge) {
  447.                         var v = d.name;
  448.                         if (edge.name == v || (edge[v] != undefined && edge[v].name == v)) {
  449.                             return 1;
  450.                         } else {
  451.                             return 0.2;
  452.                         }
  453.                     })
  454.                     //其他连先亮度调低
  455.                     edges_path.style("opacity", function (edge) {
  456.                         if (edge.source === d || edge.target === d) {
  457.                             return 1;
  458.                         }
  459.                         if (edge.source !== d && edge.target !== d) {
  460.                             return 0.2;
  461.                         }
  462.                     })
  463.                     //其他节点文字亮度调低
  464.                     nodes_text.style("opacity", function (edge) {
  465.                         var v = d.name;
  466.                         if (edge.name == v || (edge[v] != undefined && edge[v].name == v)) {
  467.                             return 1;
  468.                         } else {
  469.                             return 0.2;
  470.                         }
  471.                     })
  472.  
  473.                 })
  474.                 .on("mouseout", function (d, i) {
  475.                     //显示连线上的文字
  476.                     edges_text.style("fill-opacity", 1);
  477.                     edges_path.style("opacity", 1);
  478.                     circle.style("opacity", 1);
  479.                     nodes_text.style("opacity", 1);
  480.                     tooltip.style("opacity", 0.0);
  481.  
  482.                 })
  483.                 .call(force.drag);
  484.  
  485.             var tooltip = d3.select("body").append("div")
  486.                 .attr("class", "tooltip")
  487.                 .attr("opacity", 0.0);
  488.  
  489.  
  490.             var nodes_text = svg.selectAll(".nodetext")
  491.                 .data(nodes)
  492.                 .enter()
  493.                 .append("text")
  494.                 .style("font-size", (nodesFontSize + "px"))
  495.                 .style("font-family", nodesFontType)
  496.                 .attr('x', function (d) {
  497.                     var name = d.name;
  498.                     //如果小于四个字符，不换行
  499.                     if (name.length < 4) {
  500.                         d3.select(this).append('tspan')
  501.                             .attr("dx", -nodesFontSize * (name.length / 2))
  502.                             .text(function () { return name; });
  503.                     } else if (name.length >= 4 && name.length <= 6) {
  504.                         var top = d.name.substring(0, 3);
  505.                         var bot = d.name.substring(3, name.length);
  506.  
  507.                         d3.select(this).append('tspan')
  508.                             .attr("dx", -nodesFontSize * 1.5)
  509.                             .attr("dy", -nodesFontSize * 0.5)
  510.                             .text(function () { return top; });
  511.  
  512.                         d3.select(this).append('tspan')
  513.                             .attr("dx", -(nodesFontSize * name.length / 2))
  514.                             .attr("dy", nodesFontSize)
  515.                             .text(function () { return bot; });
  516.                     } else if (name.length > 7) {
  517.                         var top = d.name.substring(0, 3);
  518.                         var mid = d.name.substring(3, 6);
  519.                         var bot = d.name.substring(6, name.length);
  520.  
  521.                         d3.select(this).append('tspan')
  522.                             .attr("dx", -nodesFontSize * 1.5)
  523.                             .attr("dy", -nodesFontSize * 0.5)
  524.                             .text(function () { return top; });
  525.  
  526.  
  527.                         d3.select(this).append('tspan')
  528.                             .attr("dx", -nodesFontSize * 3)
  529.                             .attr("dy", nodesFontSize)
  530.                             .text(function () { return mid; });
  531.  
  532.                         d3.select(this).append('tspan')
  533.                             .attr("dx", -nodesFontSize * 2)
  534.                             .attr("dy", nodesFontSize)
  535.                             .text(function () { return "..."; });
  536.                     }
  537.                 })
  538.                 .on("mouseover", function (d, i) {
  539.                     //影藏其它连线上文字
  540.                     edges_text.style("fill-opacity", function (edge) {
  541.                         if (edge.source === d || edge.target === d) {
  542.                             return 1;
  543.                         }
  544.                         if (edge.source !== d && edge.target !== d) {
  545.                             return 0;
  546.                         }
  547.                     })
  548.                     //其他节点亮度调低
  549.                     circle.style("opacity", function (edge) {
  550.                         var v = d.name;
  551.                         if (edge.name == v || (edge[v] != undefined && edge[v].name == v)) {
  552.                             return 1;
  553.                         } else {
  554.                             return 0.2;
  555.                         }
  556.                     })
  557.                     //其他连线亮度调低
  558.                     edges_path.style("opacity", function (edge) {
  559.                         if (edge.source === d || edge.target === d) {
  560.                             return 1;
  561.                         }
  562.                         if (edge.source !== d && edge.target !== d) {
  563.                             return 0.2;
  564.                         }
  565.                     })
  566.                     //其他节点文字亮度调低
  567.                     nodes_text.style("opacity", function (edge) {
  568.                         var v = d.name;
  569.                         if (edge.name == v || (edge[v] != undefined && edge[v].name == v)) {
  570.                             return 1;
  571.                         } else {
  572.                             return 0.2;
  573.                         }
  574.                     })
  575.                     tooltip.html("<span>" + d.name + "</span>")
  576.                         .style("left", (d3.event.pageX) + "px")
  577.                         .style("top", (d3.event.pageY + 20) + "px")
  578.                         .style("display", "block")
  579.                         .style("opacity", 1.0);
  580.                 })
  581.                 .on("mouseout", function (d, i) {
  582.                     //显示连线上的文字
  583.                     edges_text.style("fill-opacity", 1);
  584.                     edges_path.style("opacity", 1);
  585.                     circle.style("opacity", 1);
  586.                     nodes_text.style("opacity", 1);
  587.                     tooltip.style("opacity", 0.0);
  588.  
  589.                 })
  590.                 .call(force.drag);
  591.  
  592.             var drag = force.drag()
  593.                 .on("dragstart", function (d, i) {
  594.                     d.fixed = true;    //拖拽开始后设定被拖拽对象为固定
  595.                 })
  596.                 .on("dragend", function (d, i) {
  597.                 })
  598.                 .on("drag", function (d, i) {
  599.                 });
  600.  
  601.             //力学图运动开始时
  602.             force.on("start", function () {
  603.             });
  604.  
  605.             //力学图运动结束时
  606.             force.on("end", function () {
  607.             });
  608.  
  609.             force.on("tick", function () {
  610.                 //限制结点的边界
  611.                 nodes.forEach(function (d, i) {
  612.                     d.x = d.x - 45 < 0 ? 45 : d.x;
  613.                     d.x = d.x + 45 > width ? width - 45 : d.x;
  614.                     d.y = d.y - 45 < 0 ? 45 : d.y;
  615.                     d.y = d.y + 45 > height ? height - 45 : d.y;
  616.                 });
  617.  
  618.                 edges_path.attr("d", function (d) {
  619.                     var tan = Math.abs((d.target.y - d.source.y) / (d.target.x - d.source.x)); //圆心连线tan值
  620.                     var x1 = d.target.x - d.source.x > 0 ? Math.sqrt(d.sourceRadius * d.sourceRadius / (tan * tan + 1)) + d.source.x :
  621.                         d.source.x - Math.sqrt(d.sourceRadius * d.sourceRadius / (tan * tan + 1)); //起点x坐标
  622.                     var y1 = d.target.y - d.source.y > 0 ? Math.sqrt(d.sourceRadius * d.sourceRadius * tan * tan / (tan * tan + 1)) + d.source.y :
  623.                         d.source.y - Math.sqrt(d.sourceRadius * d.sourceRadius * tan * tan / (tan * tan + 1)); //起点y坐标
  624.                     var x2 = d.target.x - d.source.x > 0 ? d.target.x - Math.sqrt(d.targetRadius * d.targetRadius / (1 + tan * tan)) :
  625.                         d.target.x + Math.sqrt(d.targetRadius * d.targetRadius / (1 + tan * tan));//终点x坐标
  626.                     var y2 = d.target.y - d.source.y > 0 ? d.target.y - Math.sqrt(d.targetRadius * d.targetRadius * tan * tan / (1 + tan * tan)) :
  627.                         d.target.y + Math.sqrt(d.targetRadius * d.targetRadius * tan * tan / (1 + tan * tan));//终点y坐标
  628.                     if (d.target.x - d.source.x == 0 || tan == 0) { //斜率无穷大的情况或为0时
  629.                         y1 = d.target.y - d.source.y > 0 ? d.source.y + d.sourceRadius : d.source.y - d.sourceRadius;
  630.                         y2 = d.target.y - d.source.y > 0 ? d.target.y - d.targetRadius : d.target.y + d.targetRadius;
  631.                     }
  632.                     if (d.linknum == 0) {//设置编号为0的连接线为直线，其他连接线会均分在两边  
  633.                         d.x_start = x1;
  634.                         d.y_start = y1;
  635.                         d.x_end = x2;
  636.                         d.y_end = y2;
  637.                         return 'M' + x1 + ' ' + y1 + ' L ' + x2 + ' ' + y2;
  638.                     }
  639.                     var a = d.sourceRadius > d.targetRadius ? d.targetRadius * d.linknum / 3 : d.sourceRadius * d.linknum / 3;
  640.                     var xm = d.target.x - d.source.x > 0 ? d.source.x + Math.sqrt((d.sourceRadius * d.sourceRadius - a * a) / (1 + tan * tan)) :
  641.                         d.source.x - Math.sqrt((d.sourceRadius * d.sourceRadius - a * a) / (1 + tan * tan));
  642.                     var ym = d.target.y - d.source.y > 0 ? d.source.y + Math.sqrt((d.sourceRadius * d.sourceRadius - a * a) * tan * tan / (1 + tan * tan)) :
  643.                         d.source.y - Math.sqrt((d.sourceRadius * d.sourceRadius - a * a) * tan * tan / (1 + tan * tan));
  644.                     var xn = d.target.x - d.source.x > 0 ? d.target.x - Math.sqrt((d.targetRadius * d.targetRadius - a * a) / (1 + tan * tan)) :
  645.                         d.target.x + Math.sqrt((d.targetRadius * d.targetRadius - a * a) / (1 + tan * tan));
  646.                     var yn = d.target.y - d.source.y > 0 ? d.target.y - Math.sqrt((d.targetRadius * d.targetRadius - a * a) * tan * tan / (1 + tan * tan)) :
  647.                         d.target.y + Math.sqrt((d.targetRadius * d.targetRadius - a * a) * tan * tan / (1 + tan * tan));
  648.                     if (d.target.x - d.source.x == 0 || tan == 0) {//斜率无穷大或为0时
  649.                         ym = d.target.y - d.source.y > 0 ? d.source.y + Math.sqrt(d.sourceRadius * d.sourceRadius - a * a) : d.source.y - Math.sqrt(d.sourceRadius * d.sourceRadius - a * a);
  650.                         yn = d.target.y - d.source.y > 0 ? d.target.y - Math.sqrt(d.targetRadius * d.targetRadius - a * a) : d.target.y + Math.sqrt(d.targetRadius * d.targetRadius - a * a);
  651.                     }
  652.  
  653.                     var k = (x1 - x2) / (y2 - y1);//连线垂线的斜率
  654.                     var dx = Math.sqrt(a * a / (1 + k * k)); //相对垂点x轴距离
  655.                     var dy = Math.sqrt(a * a * k * k / (1 + k * k)); //相对垂点y轴距离
  656.                     if ((y2 - y1) == 0) {
  657.                         dx = 0;
  658.                         dy = Math.sqrt(a * a);
  659.                     }
  660.                     if (a > 0) {
  661.                         var xs = k > 0 ? xm - dx : xm + dx;
  662.                         var ys = ym - dy;
  663.                         var xt = k > 0 ? xn - dx : xn + dx;
  664.                         var yt = yn - dy;
  665.                     } else {
  666.                         var xs = k > 0 ? xm + dx : xm - dx;
  667.                         var ys = ym + dy;
  668.                         var xt = k > 0 ? xn + dx : xn - dx;
  669.                         var yt = yn + dy;
  670.                     }
  671.                     //记录连线起始和终止坐标，用于定位线上文字
  672.                     d.x_start = xs;
  673.                     d.y_start = ys;
  674.                     d.x_end = xt;
  675.                     d.y_end = yt;
  676.                     return 'M' + xs + ' ' + ys + ' L ' + xt + ' ' + yt;
  677.                 });
  678.  
  679.                 //更新连接线上文字的位置
  680.                 edges_text.attr("transform", function (d) {
  681.                     return "translate(" + (d.x_start + d.x_end) / 2 + "," + (d.y_start + d.y_end) / 2 + ")" + " rotate(" + Math.atan((d.y_end - d.y_start) / (d.x_end - d.x_start)) * 180 / Math.PI + ")";
  682.                 });
  683.  
  684.  
  685.                 //更新结点图片和文字
  686.                 circle.attr("cx", function (d) { return d.x });
  687.                 circle.attr("cy", function (d) { return d.y });
  688.  
  689.                 nodes_text.attr("x", function (d) { return d.x });
  690.                 nodes_text.attr("y", function (d) { return d.y });
  691.             });
  692.         }
  693.  
  694.  
  695.         function setLinkNumber(group) {
  696.             if (group.length == 0) return;
  697.             if (group.length == 1) {
  698.                 group[0].linknum = 0;
  699.                 return;
  700.             }
  701.             var maxLinkNumber = group.length % 2 == 0 ? group.length / 2 : (group.length - 1) / 2;
  702.             if (group.length % 2 == 0) {
  703.                 var startLinkNum = -maxLinkNumber + 0.5;
  704.                 for (var i = 0; i < group.length; i++) {
  705.                     group[i].linknum = startLinkNum++;
  706.                 }
  707.             } else {
  708.                 var startLinkNum = -maxLinkNumber;
  709.                 for (var i = 0; i < group.length; i++) {
  710.                     group[i].linknum = startLinkNum++;
  711.                 }
  712.             }
  713.  
  714.         }
  715.  
  716.     </script>
  717.  
  718.  
  719. </html>

git地址：https://github.com/binliuli/visual.git

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/562990
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号