Home Explore Help
Register Sign In
chenbaoxin
/
Graph_Search_Front_Vue_Two
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Tree: a2733316c7
Branches Tags
Graph_Search_Fr...
/
public
/
bigdata
/
d3caidan.html

d3caidan.html 44 KB
History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. 

  4. <head>
    5. 

  5.   <meta charset="UTF-8">
    6. 

  6.   <title>Title</title>
    7. 

  7. 

  8. 

  9. 

  10.   <style>
    11. 

  11.     .link-active {
    12. 

  12.       stroke-opacity: 1;
    13. 

  13.       stroke-width: 3;
    14. 

  14.     }
    15. 

  15.   </style>
    16. 

  16.   <script src="http://d3js.org/d3.v5.min.js"></script>
    17. 

  17. </head>
    18. 

  18. 

  19. <body>
    20. 

  20.   <div style="border:1px solid #000;position: relative;">
    21. 

  21.     <svg width="1800" height="890"></svg>
    22. 

  22. 

  23. 

  24.   </div>
    25. 

  25. </body>
    26. 

  26. <script>
    27. 

  27. 

  28.   let marge = { top: 60, bottom: 60, left: 60, right: 60 }
    29. 

  29.   let svg = d3.select('svg')
    30. 

  30.   let width = svg.attr('width')
    31. 

  31.   let height = svg.attr('height')
    32. 

  32.   svg.call(
    33. 

  33.     d3.zoom().on('zoom', function () {
    34. 

  34.       g.attr('transform', d3.event.transform)
    35. 

  35.     })
    36. 

  36.   )
    37. 

  37.     .on('dblclick.zoom', null)
    38. 

  38.   let g = svg.append('g')
    39. 

  39.     .attr('transform', 'translate(' + marge.top + ',' + marge.left + ')')
    40. 

  40.     .attr('class', 'container')
    41. 

  41.   // 准备数据
    42. 

  42.   // 节点集
    43. 

  43.   let nodes = [
    44. 

  44.     { id: 12, name: '湖南邵阳' },
    45. 

  45.     { id: 2, name: '山东泰安' },
    46. 

  46.     { id: 3, name: '广东阳江不知道怎么回' },
    47. 

  47.     { id: 4, name: '山西太原' },
    48. 

  48.     { id: 5, name: '亮' },
    49. 

  49.     { id: 6, name: '丽' },
    50. 

  50.     { id: 7, name: '雪' },
    51. 

  51.     { id: 8, name: '小明' },
    52. 

  52.     { id: 9, name: '组长' }
    53. 

  53.   ]
    54. 

  54.   // 143 112
    55. 

  55.   // 边集
    56. 

  56.   let tempEdges = [
    57. 

  57.     { id: 1, source: 12, target: 5, relation: '籍贯', value: 1.3 },
    58. 

  58.     { id: 2, source: 5, target: 6, relation: '舍友', value: 1 },
    59. 

  59.     { id: 3, source: 5, target: 7, relation: '舍友', value: 1 },
    60. 

  60.     { id: 4, source: 5, target: 8, relation: '舍友', value: 1 },
    61. 

  61.     { id: 5, source: 2, target: 7, relation: '籍贯', value: 2 },
    62. 

  62.     { id: 6, source: 3, target: 6, relation: '籍贯', value: 0.9 },
    63. 

  63.     { id: 7, source: 4, target: 8, relation: '籍贯', value: 1 },
    64. 

  64.     { id: 8, source: 6, target: 7, relation: '同学', value: 1.6 },
    65. 

  65.     { id: 9, source: 7, target: 8, relation: '朋友', value: 0.7 },
    66. 

  66.     { id: 10, source: 7, target: 9, relation: '职责', value: 2 },
    67. 

  67.     { id: 11, source: 9, target: 7, relation: '人物', value: 2 },
    68. 

  68.     { id: 12, source: 9, target: 7, relation: '哈哈哈', value: 2 }
    69. 

  69.   ]
    70. 

  70.   nodes.forEach(item => {
    71. 

  71. 

  72.   })
    73. 

  73.   // 生成 nodes map
    74. 

  74.   let nodesMap = genNodesMap(nodes);
    75. 

  75.   console.log('3333',nodesMap)
    76. 

  76.   nodesData = d3.values(nodesMap)
    77. 

  77.   let linkMap = genLinkMap(tempEdges)
    78. 

  78.   // 构建 links（source 属性必须从 0 开始）
    79. 

  79.   edges = genLinks(tempEdges);
    80. 

  80.   console.log('123123',edges,nodesData)
    81. 

  81.   // 设置一个颜色比例尺
    82. 

  82.   let colorScale = d3.scaleOrdinal()
    83. 

  83.     .domain(d3.range(nodesData.length))
    84. 

  84.     .range(d3.schemeCategory10)
    85. 

  85.   // 新建一个力导向图
    86. 

  86.   let forceSimulation = d3.forceSimulation()
    87. 

  87.     .force('link', d3.forceLink())
    88. 

  88.     .force('charge', d3.forceManyBody())
    89. 

  89.     .force('center', d3.forceCenter())
    90. 

  90.   // 生成节点数据
    91. 

  91.   forceSimulation.nodes(nodesData)
    92. 

  92.   // 生成边数据
    93. 

  93.   forceSimulation.force('link')
    94. 

  94.     .links(edges)
    95. 

  95.     .distance(function (d) { // 每一边的长度
    96. 

  96.       return d.value * 200
    97. 

  97.     })
    98. 

  98.   // 设置图形中心位置
    99. 

  99.   forceSimulation.force('center')
    100. 

  100.     .x(width / 2)
    101. 

  101.     .y(height / 2)
    102. 

  102.   // 箭头
    103. 

  103.   var marker = g.append('g').attr('class', 'showLine').append('marker')
    104. 

  104.     .attr('id', 'resolved')
    105. 

  105.     // .attr("markerUnits","strokeWidth")// 设置为strokeWidth箭头会随着线的粗细发生变化
    106. 

  106.     .attr('markerUnits', 'userSpaceOnUse')
    107. 

  107.     .attr('viewBox', '0 -5 10 10')// 坐标系的区域
    108. 

  108.     .attr('refX', 32)// 箭头坐标
    109. 

  109.     .attr('refY', 0)
    110. 

  110.     .attr('markerWidth', 10)// 标识的大小
    111. 

  111.     .attr('markerHeight', 10)
    112. 

  112.     .attr('orient', 'auto')// 绘制方向，可设定为：auto（自动确认方向）和 角度值
    113. 

  113.     .attr('stroke-width', 2)// 箭头宽度
    114. 

  114.     .append('path')
    115. 

  115.     .attr('d', 'M0,-5L10,0L0,5')// 箭头的路径
    116. 

  116.     .attr('fill', '#4ffeff')// 箭头颜色
    117. 

  117.   // 绘制边
    118. 

  118.   let links = g.append('g').selectAll('path')
    119. 

  119.     .data(edges)
    120. 

  120.     .enter()
    121. 

  121.     .append('path')
    122. 

  122.     .attr('d', link => genLinkPath(link)) // 遍历所有数据。d表示当前遍历到的数据，返回绘制的贝塞尔曲线
    123. 

  123.     .attr('id', (d, i) => { return 'edgepath' + d.id }) // 设置id，用于连线文字
    124. 

  124.     .attr("stroke", "#4ffeff")
    125. 

  125.           .attr("stroke-opacity", 0.6)
    126. 

  126.     .style('stroke-width', 1) // 粗细
    127. 

  127.     .attr('class', 'lines')
    128. 

  128.     .attr('marker-end', 'url(#resolved)') // 根据箭头标记的id号标记箭头
    129. 

  129.   // 边上的文字
    130. 

  130.   let linksText = g.append('g')
    131. 

  131.     .selectAll('text')
    132. 

  132.     .data(edges)
    133. 

  133.     .enter()
    134. 

  134.     .append('text')
    135. 

  135.     .style("fill", "#C0F8F8")
    136. 

  136.     .attr('class', 'linksText')
    137. 

  137.     .text(function (d) {
    138. 

  138.       return d.relations
    139. 

  139.     })
    140. 

  140.     .style('font-size', 14)
    141. 

  141. 

  142.     //图片容器
    143. 

  143.     let pattern = g.append('g')
    144. 

  144.         .selectAll("pattern")
    145. 

  145.         .data(nodesData, function (node) {
    146. 

  146.    
    147. 

  147.           return "pattern" + node.index;
    148. 

  148.         })
    149. 

  149.         .join("pattern")
    150. 

  150.         .attr("id", function (node) {
    151. 

  151.           return "pattern" + node.index;
    152. 

  152.         })
    153. 

  153.         .attr("x", 0)
    154. 

  154.         .attr("y", 0)
    155. 

  155.         .attr("height", 10)
    156. 

  156.         .attr("width", 10)
    157. 

  157.         .append("svg:image");
    158. 

  158.         console.log(pattern);
    159. 

  159.     //节点背景图片地址
    160. 

  160.     let images = g
    161. 

  161.         .selectAll("image")
    162. 

  162.         .data(nodesData, function (node) { 
    163. 

  163.           console.log(node);
    164. 

  164.           return "pattern-image" + node.index;
    165. 

  165.         })
    166. 

  166.         .attr("xlink:href", function (node) {
    167. 

  167.       
    168. 

  168.           return 'data:image/png;base64,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'
    169. 

  169.         })
    170. 

  170.         .attr("preserveAspectRatio", "none")
    171. 

  171.         .attr("x", 0)
    172. 

  172.         .attr("y", 0)
    173. 

  173.         .attr("height", function (node) {
    174. 

  174.           return 70;
    175. 

  175.         })
    176. 

  176.         .attr("width", function (node) {
    177. 

  177.           return 70;
    178. 

  178.         });
    179. 

  179. 

  180.   // 创建分组
    181. 

  181. 

  182.   let gs = g.append('g')
    183. 

  183.     .selectAll('.circleText')
    184. 

  184.     .data(nodesData)
    185. 

  185.     .enter()
    186. 

  186.     .append('g')
    187. 

  187.     .attr('class', 'singleNode')
    188. 

  188.     .attr('id', function (d) {
    189. 

  189.       return 'singleNode' + d.id
    190. 

  190.     })
    191. 

  191.     .style('cursor', 'pointer')
    192. 

  192.     .attr('transform', function (d) {
    193. 

  193.       let cirX = d.x
    194. 

  194.       let cirY = d.y
    195. 

  195.       return 'translate(' + cirX + ',' + cirY + ')'
    196. 

  196.     })
    197. 

  197.   
    198. 

  198.   // 鼠标交互
    199. 

  199.   // gs.on('mouseover', function (d, i) {
    200. 

  200.   //   // 显示连接线上的文字
    201. 

  201.   //   toggleLineText(d, true)
    202. 

  202.   //   toggleLine(links, d, true)
    203. 

  203.   //   toggleNode(gs, d, true)
    204. 

  204.   // })
    205. 

  205.     // .on('mouseout', function (d, i) {
    206. 

  206.     //   // 隐去连接线上的文字
    207. 

  207.     //   toggleLineText(d, false)
    208. 

  208.     //   toggleLine(links, d, false)
    209. 

  209.     //   toggleNode(gs, d, false)
    210. 

  210.     // })
    211. 

  211.     .on('click', function (d, i) {
    212. 

  212.       linksText.style('fill-opacity', function (edge) {
    213. 

  213.         if (edge.source === d) {
    214. 

  214.           return 1
    215. 

  215.         }
    216. 

  216.       })
    217. 

  217.       console.log(d);
    218. 

  218.       toggleCircle(d3.select(this), d)
    219. 

  219.     }, true)
    220. 

  220.     .call(d3.drag()
    221. 

  221.       .on('start', started)
    222. 

  222.       .on('drag', dragged)
    223. 

  223.       .on('end', ended)
    224. 

  224.     )
    225. 

  225.   svg.on('click', function () {
    226. 

  226.     nodes.forEach(d => d.clickFlag = false)
    227. 

  227.     var event = d3.event
    228. 

  228.     var target = event.srcElement,   //  获取事件发生源
    229. 

  229.       data = d3.select(target).datum(); //  获取事件发生源的数据
    230. 

  230.     removeSingle()
    231. 

  231.     if (!data) {
    232. 

  232.       document.getElementById('xxx').innerText = ''
    233. 

  233.     }
    234. 

  234.   }, true)
    235. 

  235.   forceSimulation.on('tick', ticked)
    236. 

  236.   function toggleLineText(currNode, isHover) {
    237. 

  237.     if (isHover) {
    238. 

  238.       linksText.style('fill-opacity', function (edge) {
    239. 

  239.         if (edge.source === currNode) {
    240. 

  240.           return 1
    241. 

  241.         }
    242. 

  242.       })
    243. 

  243.     } else {
    244. 

  244.       linksText.style('fill-opacity', function (edge) {
    245. 

  245.         if (edge.source === currNode || edge.target === currNode) {
    246. 

  246.           return 0
    247. 

  247.         }
    248. 

  248.       })
    249. 

  249.     }
    250. 

  250.   }
    251. 

  251.   function toggleLine(linkLine, currNode, isHover) {
    252. 

  252.     if (isHover) {
    253. 

  253.       // 加重连线样式
    254. 

  254.       links
    255. 

  255.         .style('opacity', 0.1)
    256. 

  256.         .filter(link => isLinkLine(currNode, link))
    257. 

  257.         .style('opacity', 1)
    258. 

  258.         .classed('link-active', true)
    259. 

  259.     } else {
    260. 

  260.       links
    261. 

  261.         .style('opacity', 1)
    262. 

  262.         .classed('link-active', false)
    263. 

  263.     }
    264. 

  264.   }
    265. 

  265.   function showMyList() {
    266. 

  266.     var e = { id: 10, name: "河北" };
    267. 

  267.     var h = { id: 11, name: "河南" };
    268. 

  268.     var f = { id: 13, source: 9, target: 10, relation: '222', value: 2 };
    269. 

  269.     nodes.push(e);
    270. 

  270.     nodes.push(h);
    271. 

  271.     tempEdges.push(f);
    272. 

  272.     nodesMap = genNodesMap(nodes);
    273. 

  273.     nodesData = d3.values(nodesMap)
    274. 

  274.     linkMap = genLinkMap(tempEdges)
    275. 

  275.     edges = genLinks(tempEdges)
    276. 

  276.     updateData()
    277. 

  277.   }
    278. 

  278.   function updateData() {
    279. 

  279.     links = links
    280. 

  280.       .data(edges, function (d) {
    281. 

  281.       })
    282. 

  282.       .join("path")
    283. 

  283.       .attr('id', (d, i) => { return 'edgepath' + d.id }) // 设置id，用于连线文字
    284. 

  284.       .style('stroke', '#000') // 颜色
    285. 

  285.       .style('stroke-width', 2) // 粗细
    286. 

  286.       .attr('class', 'lines')
    287. 

  287.       .attr('marker-end', 'url(#resolved)') // 根据箭头标记的id号标记箭头
    288. 

  288.       .merge(links);
    289. 

  289.     linksText = linksText
    290. 

  290.       .data(edges)
    291. 

  291.       
    292. 

  292.       .join('text')
    293. 

  293.       .attr('class', 'linksText')
    294. 

  294.       .text(function (d) {
    295. 

  295.         return d.relations
    296. 

  296.       })
    297. 

  297.       .style('font-size', 14)
    298. 

  298.       .attr('fill-opacity', 0)
    299. 

  299.     gs = gs
    300. 

  300.       .data(nodesData, function (d) {
    301. 

  301.       })
    302. 

  302.       .join("g")
    303. 

  303.       .attr('class', 'singleNode')
    304. 

  304.       .attr('id', function (d) {
    305. 

  305.         return 'singleNode' + d.id
    306. 

  306.       })
    307. 

  307.       .style('cursor', 'pointer')
    308. 

  308.       .merge(gs)
    309. 

  309.       .call(d3.drag()
    310. 

  310.         .on("start", started)
    311. 

  311.         .on("drag", dragged)
    312. 

  312.         .on("end", ended));
    313. 

  313. 

  314. 

  315.     gs.append('circle')
    316. 

  316.       .attr('fill', function (d) {
    317. 

  317.         return 'orange'
    318. 

  318.       })
    319. 

  319.       .attr('r', 35)
    320. 

  320.       .attr('stroke', 'red')
    321. 

  321.       .attr('stroke-width', 3)
    322. 

  322.     // gs.on('mouseover', function (d, i) {
    323. 

  323.     //   // 显示连接线上的文字
    324. 

  324.     //   toggleLineText(d, true)
    325. 

  325.     //   toggleLine(links, d, true)
    326. 

  326.     //   toggleNode(gs, d, true)
    327. 

  327.     // })
    328. 

  328.       // .on('mouseout', function (d, i) {
    329. 

  329.       //   // 隐去连接线上的文字
    330. 

  330.       //   toggleLineText(d, false)
    331. 

  331.       //   toggleLine(links, d, false)
    332. 

  332.       //   toggleNode(gs, d, false)
    333. 

  333.       // })
    334. 

  334.       .on('click', function (d, i) {
    335. 

  335.         linksText.style('fill-opacity', function (edge) {
    336. 

  336.           if (edge.source === d) {
    337. 

  337.             return 1
    338. 

  338.           }
    339. 

  339.         })
    340. 

  340.         toggleCircle(d3.select(this), d)
    341. 

  341.       }, true)
    342. 

  342.     gs.append('text')
    343. 

  343.       .attr('y', -20)
    344. 

  344.       .attr('dy', 10)
    345. 

  345.       .attr('text-anchor', 'middle')
    346. 

  346.       .style('font-size', 12)
    347. 

  347.       .attr('x', function ({ name }) {
    348. 

  348.         return textBreaking(d3.select(this), name)
    349. 

  349.       })
    350. 

  350.     gs.append('title')
    351. 

  351.       .text((node) => {
    352. 

  352.         return node.name
    353. 

  353.       })
    354. 

  354.     forceSimulation.nodes(nodesData);
    355. 

  355.     forceSimulation.force("link").links(edges);
    356. 

  356.     forceSimulation.alpha(0.8).restart();
    357. 

  357.   }
    358. 

  358.   function getLineTextAngle(d, bbox) {
    359. 

  359.     if (d.target.x < d.source.x) {
    360. 

  360.       const {
    361. 

  361.         x,
    362. 

  362.         y,
    363. 

  363.         width,
    364. 

  364.         height
    365. 

  365.       } = bbox;
    366. 

  366.       const rx = x + width / 2;
    367. 

  367.       const ry = y + height / 2;
    368. 

  368.       return 'rotate(180 ' + rx + ' ' + ry + ')';
    369. 

  369.     } else {
    370. 

  370.       return 'rotate(0)';
    371. 

  371.     }
    372. 

  372.   }
    373. 

  373.   function toggleNode(nodeCircle, currNode, isHover) {
    374. 

  374.     if (isHover) {
    375. 

  375.       // 提升节点层级 
    376. 

  376.       // nodeCircle.sort((a, b) => a.id === currNode.id ? 1 : -1);
    377. 

  377.       // this.parentNode.appendChild(this);
    378. 

  378.       nodeCircle
    379. 

  379.         .style('opacity', .1)
    380. 

  380.         .filter(node => isLinkNode(currNode, node))
    381. 

  381.         .style('opacity', 1);
    382. 

  382. 

  383.     } else {
    384. 

  384.       nodeCircle.style('opacity', 1);
    385. 

  385.     }
    386. 

  386. 

  387.   }
    388. 

  388.    //删除有用
    389. 

  389.   function removeSingle() {
    390. 

  390.     d3.select('.singleCircle').remove()
    391. 

  391.   }
    392. 

  392.   function toggleCircle(current, d) {
    393. 

  393.     var currentD = d
    394. 

  394.     // if (d.clickFlag) {
    395. 

  395.     //   removeSingle()
    396. 

  396.     //   document.getElementById('xxx').innerText = ''
    397. 

  397.     // }
    398. 

  398.     d.clickFlag = true
    399. 

  399.     // document.getElementById('xxx').innerText = d.name
    400. 

  400.     var data = [{
    401. 

  401.       population: 30,
    402. 

  402.       value: '删除',
    403. 

  403.       type: 'delete'
    404. 

  404.     }, {
    405. 

  405.       population: 30,
    406. 

  406.       value: '收起',
    407. 

  407.       type: 'showOn'
    408. 

  408.     }, {
    409. 

  409.       population: 30,
    410. 

  410.       value: '展开',
    411. 

  411.       type: 'showOff'
    412. 

  412.     }]
    413. 

  413.     var sum = d3.sum(data.map(function (d) {
    414. 

  414.       return d.population
    415. 

  415.     }))
    416. 

  416.     for (i in data) {
    417. 

  417.       data[i].Percentage = (data[i].population / sum * 100).toFixed(0) + "%";
    418. 

  418.     }
    419. 

  419.     var width = 300,
    420. 

  420.       height = 300,
    421. 

  421.       margin = { "left": 30, "top": 30, "right": 30, "bottom": 30 },
    422. 

  422.       svg_width = width + margin.left + margin.right,
    423. 

  423.       svg_height = height + margin.top + margin.bottom,
    424. 

  424.       font_size = 15;
    425. 

  425.     var g = current
    426. 

  426.       .append("g")
    427. 

  427.       .attr('class', 'singleCircle')
    428. 

  428.       .attr("width", width)
    429. 

  429.       .attr("height", height)
    430. 

  430.       console.log(g);
    431. 

  431.     var Pie = g.append("g")
    432. 

  432.     console.log(Pie);
    433. 

  433.     var arc_generator = d3.arc()
    434. 

  434.       .innerRadius(width / 6.5)
    435. 

  435.       .outerRadius(width / 4)
    436. 

  436.     var angle_data = d3.pie()
    437. 

  437.       .value(function (d) {
    438. 

  438.         return d.population;
    439. 

  439.       })
    440. 

  440.     var pieData = angle_data(data)
    441. 

  441.     var pieAngle = pieData.map(function (p) {
    442. 

  442.       return (p.startAngle + p.endAngle) / 2 / Math.PI * 180;
    443. 

  443.     });
    444. 

  444. 

  445.     // var color=d3.schemeCategory10;
    446. 

  446. 

  447.     //生成内部圆环
    448. 

  448.     Pie.selectAll("path")
    449. 

  449.       .data(angle_data(data))
    450. 

  450.       .enter()
    451. 

  451.       .append("path")
    452. 

  452.       .attr("d", arc_generator)
    453. 

  453.       .style("fill", function (d, i) {
    454. 

  454.         return 'grey';
    455. 

  455.       })
    456. 

  456.       .style('stroke', 'black')
    457. 

  457.       .attr("class", "path")
    458. 

  458.       .attr('type', function (d) {
    459. 

  459.         return d.data.type
    460. 

  460.       })
    461. 

  461.       .on('click', function (d) {
    462. 

  462.         if (d.data.type === 'delete') {
    463. 

  463.           deleteNode(currentD)
    464. 

  464.         } else if (d.data.type === 'showOn') {
    465. 

  465.           deleteNextNodes(currentD)
    466. 

  466.         } else {
    467. 

  467.           // showMyList()
    468. 

  468.         }
    469. 

  469.         d3.event.stopPropagation()
    470. 

  470.       })
    471. 

  471.     var arc_label = d3.arc()
    472. 

  472.       .innerRadius(width / 4)
    473. 

  473.       .outerRadius(width / 2)
    474. 

  474. 

  475.     Pie.selectAll(".arc_label")
    476. 

  476.       .data(angle_data(data))
    477. 

  477.       .enter()
    478. 

  478.       .append("path")
    479. 

  479.       .attr("d", arc_label)
    480. 

  480.       .attr("class", "arc_label")
    481. 

  481.       .style("fill", "none")
    482. 

  482.     const labelFontSize = 12;
    483. 

  483.     const labelValRadius = (170 * 0.35 - labelFontSize * 0.35); // 计算正确半径 文字位置
    484. 

  484.     const labelValRadius1 = (170 * 0.35 + labelFontSize * 0.35);
    485. 

  485. 

  486. 

  487.     const labelsVals = current.select('.singleCircle').append('g')
    488. 

  488.       .classed('labelsvals', true);
    489. 

  489. 

  490.     // 定义两条路径以使标签的方向正确
    491. 

  491.     labelsVals.append('def')
    492. 

  492.       .append('path')
    493. 

  493.       .attr('id', 'label-path-1')
    494. 

  494.       .attr('d', `m0 ${-labelValRadius} a${labelValRadius} ${labelValRadius} 0 1,1 -0.01 0`);
    495. 

  495.     labelsVals.append('def')
    496. 

  496.       .append('path')
    497. 

  497.       .attr('id', 'label-path-2')
    498. 

  498.       .attr('d', `m0 ${-labelValRadius1} a${labelValRadius1} ${labelValRadius1} 0 1,0 0.01 0`);
    499. 

  499. 

  500.     labelsVals.selectAll('text')
    501. 

  501.       .data(data)
    502. 

  502.       .enter()
    503. 

  503.       .append('text')
    504. 

  504.       .style('font-size', labelFontSize)
    505. 

  505.       .style('fill', 'black')
    506. 

  506.       .style('font-weight', "bold")
    507. 

  507.       .style('text-anchor', 'middle')
    508. 

  508.       .append('textPath')
    509. 

  509.       .attr('href', function (d, i) {
    510. 

  510.         const p = pieData[i];
    511. 

  511.         const angle = pieAngle[i];
    512. 

  512.         if (angle > 90 && angle <= 270) { // 根据角度选择路径
    513. 

  513.           return '#label-path-2';
    514. 

  514.         } else {
    515. 

  515.           return '#label-path-1';
    516. 

  516.         }
    517. 

  517.       })
    518. 

  518.       .attr('startOffset', function (d, i) {
    519. 

  519.         const p = pieData[i];
    520. 

  520.         const angle = pieAngle[i];
    521. 

  521.         let percent = (p.startAngle + p.endAngle) / 2 / 2 / Math.PI * 100;
    522. 

  522.         if (angle > 90 && angle <= 270) { // 分别计算每条路径的正确百分比
    523. 

  523.           return 100 - percent + "%";
    524. 

  524.         }
    525. 

  525.         return percent + "%";
    526. 

  526.       })
    527. 

  527.       .text(function (d) {
    528. 

  528.         return d.value;
    529. 

  529.       })
    530. 

  530.       .on('click', function (d) {
    531. 

  531.         if (d.type === 'delete') {
    532. 

  532.           deleteNode(currentD)
    533. 

  533.         } else if (d.type === 'showOn') {
    534. 

  534.           deleteNextNodes(currentD)
    535. 

  535.         } else {
    536. 

  536.           // showMyList()
    537. 

  537.         }
    538. 

  538.         d3.event.stopPropagation()
    539. 

  539.       }, true)
    540. 

  540.   }
    541. 

  541.   //删除当前节点下一级没有其他关系的节点
    542. 

  542.   function deleteNextNodes(curr) {
    543. 

  543.     console.log('收起？');
    544. 

  544.     // document.getElementById('xxx').innerText = '';
    545. 

  545.     // var removeIndex = nodesData.findIndex(node=>node.id == curr.id)
    546. 

  546.     // nodesData.splice(removeIndex,1)
    547. 

  547.     // nodes.splice(removeIndex,1)
    548. 

  548.     d3.select(this).remove();
    549. 

  549.     let relationNode = [],
    550. 

  550.       relationList = [],
    551. 

  551.       hasRelationList = []
    552. 

  552.     var clickNode = curr.id;//点击节点的名字
    553. 

  553.     d3.selectAll(".lines").each(function (e) {
    554. 

  554.       if (e.source.id == curr.id || e.target.id == curr.id) {
    555. 

  555.         hasRelationList.push(e)
    556. 

  556.       } else {
    557. 

  557.         relationList.push(e)//出去跟删除节点有关系的其他关系
    558. 

  558.       }
    559. 

  559.       //需要删除的节点相关的节点
    560. 

  560.       if (e.source.id == curr.id) {
    561. 

  561.         relationNode.push(e.target)
    562. 

  562.       }
    563. 

  563.       //需要删除的节点相关的节点
    564. 

  564.       if (e.target.id == curr.id) {
    565. 

  565.         relationNode.push(e.source)
    566. 

  566.       }
    567. 

  567.     })
    568. 

  568.     var tempNodeList = JSON.parse(JSON.stringify(relationNode))
    569. 

  569.     tempNodeList = uniqObjInArray(tempNodeList)
    570. 

  570.     //区分下级节点是否是孤节点
    571. 

  571.     tempNodeList.forEach(function (item, index) {
    572. 

  572.       var hasLine = relationList.findIndex(jtem => jtem.target.id == item.id || jtem.source.id == item.id)
    573. 

  573.       if (hasLine >= 0) {
    574. 

  574.         item.notSingle = true
    575. 

  575.       }
    576. 

  576.     })
    577. 

  577.     tempNodeList.forEach(function (item, index) {
    578. 

  578.       if (!item.notSingle) {
    579. 

  579.         d3.select('#singleNode' + item.id).remove()
    580. 

  580.       }
    581. 

  581.     })
    582. 

  582.     var otherTempNode = [];
    583. 

  583.     tempNodeList = tempNodeList.map(item => {
    584. 

  584.       if (!item.notSingle) {
    585. 

  585.         otherTempNode.push(item)
    586. 

  586.       }
    587. 

  587.     })
    588. 

  588.     hasRelationList.forEach(item => {
    589. 

  589.       otherTempNode.forEach(jtem => {
    590. 

  590.         if (jtem.id == item.source.id || jtem.id == item.target.id) {
    591. 

  591.           d3.select('#edgepath' + item.id).remove()
    592. 

  592.         }
    593. 

  593.       })
    594. 

  594.     })
    595. 

  595.     d3.selectAll(".singleNode").each(function (d, i) {
    596. 

  596.       var temp = d.id;
    597. 

  597.       //删除当前需要隐藏的节点
    598. 

  598.       if (temp == clickNode) {
    599. 

  599.         removeSingle()
    600. 

  600.       }
    601. 

  601.     });
    602. 

  602.     d3.selectAll(".linksText").each(function (e) {
    603. 

  603.       if (e.source === curr || e.target === curr) {
    604. 

  604.         d3.select(this).remove();
    605. 

  605.       }
    606. 

  606.     })
    607. 

  607.     gs.style('opacity', 1);
    608. 

  608.     links.style('opacity', 1)
    609. 

  609.       .classed('link-active', false);
    610. 

  610.   }
    611. 

  611.   //删除当前及下一级没有其他关系的节点
    612. 

  612.   function deleteNode(curr) {
    613. 

  613.     document.getElementById('xxx').innerText = '';
    614. 

  614.     var removeIndex = nodesData.findIndex(node => node.id == curr.id)
    615. 

  615.     nodesData.splice(removeIndex, 1)
    616. 

  616.     nodes.splice(removeIndex, 1)
    617. 

  617.     d3.select(this).remove();
    618. 

  618.     let relationNode = [],
    619. 

  619.       relationList = []
    620. 

  620.     var clickNode = curr.id;//点击节点的名字
    621. 

  621.     d3.selectAll(".lines").each(function (e) {
    622. 

  622.       if (e.source.id == curr.id || e.target.id == curr.id) {
    623. 

  623.         d3.select(this).remove();
    624. 

  624.       } else {
    625. 

  625.         relationList.push(e)//出去跟删除节点有关系的其他关系
    626. 

  626.       }
    627. 

  627.       //需要删除的节点相关的节点
    628. 

  628.       if (e.source.id == curr.id) {
    629. 

  629.         relationNode.push(e.target)
    630. 

  630.       }
    631. 

  631.       //需要删除的节点相关的节点
    632. 

  632.       if (e.target.id == curr.id) {
    633. 

  633.         relationNode.push(e.source)
    634. 

  634.       }
    635. 

  635.     })
    636. 

  636.     var tempNodeList = JSON.parse(JSON.stringify(relationNode))
    637. 

  637.     tempNodeList = uniqObjInArray(tempNodeList)
    638. 

  638.     //区分下级节点是否是孤节点
    639. 

  639.     tempNodeList.forEach(function (item, index) {
    640. 

  640.       var hasLine = relationList.findIndex(jtem => jtem.target.id == item.id || jtem.source.id == item.id)
    641. 

  641.       if (hasLine >= 0) {
    642. 

  642.         item.notSingle = true
    643. 

  643.       }
    644. 

  644.     })
    645. 

  645.     tempNodeList.forEach(function (item, index) {
    646. 

  646.       if (!item.notSingle) {
    647. 

  647.         d3.select('#singleNode' + item.id).remove()
    648. 

  648.       }
    649. 

  649.     })
    650. 

  650.     d3.selectAll(".singleNode").each(function (d, i) {
    651. 

  651.       var temp = d.id;
    652. 

  652.       //删除当前需要隐藏的节点
    653. 

  653.       if (temp == clickNode) {
    654. 

  654.         removeSingle()
    655. 

  655.         d3.select(this).remove();
    656. 

  656.       }
    657. 

  657.     });
    658. 

  658.     d3.selectAll(".linksText").each(function (e) {
    659. 

  659.       if (e.source === curr || e.target === curr) {
    660. 

  660.         d3.select(this).remove();
    661. 

  661.       }
    662. 

  662.     })
    663. 

  663.     gs.style('opacity', 1);
    664. 

  664.     links.style('opacity', 1)
    665. 

  665.       .classed('link-active', false);
    666. 

  666.   }
    667. 

  667.   // 关联节点去重重组
    668. 

  668.   function uniqObjInArray(objarray) {
    669. 

  669.     let len = objarray.length;
    670. 

  670.     let tempJson = {
    671. 

  671. 

  672.     };
    673. 

  673.     let res = [];
    674. 

  674.     for (let i = 0; i < len; i++) {
    675. 

  675.       //取出每一个对象
    676. 

  676.       tempJson[JSON.stringify(objarray[i])] = true;
    677. 

  677.     }
    678. 

  678.     let keyItems = Object.keys(tempJson);
    679. 

  679.     for (let j = 0; j < keyItems.length; j++) {
    680. 

  680.       res.push(JSON.parse(keyItems[j]));
    681. 

  681.     }
    682. 

  682.     return res;
    683. 

  683.   }
    684. 

  684.   function isLinkLine(node, link) {
    685. 

  685.     return link.source.id === node.id
    686. 

  686.   }
    687. 

  687.   function isLinkNode(currNode, node) {
    688. 

  688.     if (currNode.id === node.id) {
    689. 

  689.       return true;
    690. 

  690.     }
    691. 

  691.     return linkMap[currNode.id + '-' + node.id] || linkMap[node.id + '-' + currNode.id];
    692. 

  692.   }
    693. 

  693.   function largerNode(nodes, currNode, isHover) {
    694. 

  694.     if (isHover) {
    695. 

  695.       gs
    696. 

  696.         .style('stroke-width', 1)
    697. 

  697.         .filter(node => isNode(currNode, node))
    698. 

  698.         .style('stroke-width', 10)
    699. 

  699.     } else {
    700. 

  700.       gs
    701. 

  701.         .style('stroke-width', 1)
    702. 

  702.     }
    703. 

  703.   }
    704. 

  704.   function isNode(node, cNode) {
    705. 

  705.     return true
    706. 

  706.   }
    707. 

  707.   // 绘制节点
    708. 

  708.   gs.append('circle')
    709. 

  709.     .attr('r', 35)
    710. 

  710.     .attr('id', function (d) {
    711. 

  711.       return 'circle' + d.id
    712. 

  712.     })
    713. 

  713.     // .attr('fill', function (d, i) {
    714. 

  714.     //   return 'orange'
    715. 

  715.     // })
    716. 

  716.     .style("fill", function (node) {
    717. 

  717.           return "url(#" + "pattern" + node.index + ")";
    718. 

  718.         })
    719. 

  719.     .attr('stroke-width', 3)
    720. 

  720.   // 文字
    721. 

  721.   var nodeText = gs.append('text')
    722. 

  722.     // .attr('x', -10)
    723. 

  723.     // .attr('y', -20)
    724. 

  724.     // .attr('dy', 10)
    725. 

  725.    
    726. 

  726.     .text(function (d) {
    727. 

  727.           return d.name;
    728. 

  728.         })
    729. 

  729.     .attr('text-anchor', 'middle')
    730. 

  730.     .style('font-size', 11)
    731. 

  731.     .style("fill", "white")
    732. 

  732.   
    733. 

  733.     .attr("dx", function () {
    734. 

  734.           return (this.getBoundingClientRect().width / 2) * 0.1;
    735. 

  735.         })
    736. 

  736.         .attr("dy", function (d) {
    737. 

  737.           return 35;
    738. 

  738.         })  
    739. 

  739. 

  740.   gs.append('title')
    741. 

  741.     .text((node) => {
    742. 

  742.       return node.name
    743. 

  743.     })
    744. 

  744.   function genLinkMap(relations) {
    745. 

  745.     const hash = {};
    746. 

  746.     relations.map(function ({
    747. 

  747.       source,
    748. 

  748.       target,
    749. 

  749.       relation
    750. 

  750.     }) {
    751. 

  751.       const key = source + '-' + target;
    752. 

  752.       if (hash[key]) {
    753. 

  753.         hash[key] += 1;
    754. 

  754.         hash[key + '-relation'] += '、' + relation;
    755. 

  755.       } else {
    756. 

  756.         hash[key] = 1;
    757. 

  757.         hash[key + '-relation'] = relation;
    758. 

  758.       }
    759. 

  759.     });
    760. 

  760.     return hash;
    761. 

  761.   }
    762. 

  762.   function genLinks(relations) {
    763. 

  763.     const indexHash = {};
    764. 

  764.     return relations.map(function ({
    765. 

  765.       id,
    766. 

  766.       source,
    767. 

  767.       target,
    768. 

  768.       relation,
    769. 

  769.       value
    770. 

  770.     }, i) {
    771. 

  771.       const linkKey = source + '-' + target;
    772. 

  772.       const count = linkMap[linkKey];
    773. 

  773.       if (indexHash[linkKey]) {
    774. 

  774.         console.log(indexHash[linkKey]);
    775. 

  775.         indexHash[linkKey] -= 1;
    776. 

  776.       } else {
    777. 

  777.         indexHash[linkKey] = count - 1;
    778. 

  778.       }
    779. 

  779.       return {
    780. 

  780.         id,
    781. 

  781.         source: nodesMap[source],
    782. 

  782.         target: nodesMap[target],
    783. 

  783.         relation,
    784. 

  784.         value,
    785. 

  785.         relations: linkMap[linkKey + '-relation'],
    786. 

  786.         count: linkMap[linkKey],
    787. 

  787.         index: indexHash[linkKey]
    788. 

  788.       }
    789. 

  789.     })
    790. 

  790.   }
    791. 

  791.   // 生成关系连线路径
    792. 

  792.   function genLinkPath(link) {
    793. 

  793.     const count = link.count;
    794. 

  794.     const index = link.index;
    795. 

  795.     let sx = link.source.x;
    796. 

  796.     let tx = link.target.x;
    797. 

  797.     let sy = link.source.y;
    798. 

  798.     let ty = link.target.y;
    799. 

  799.     return 'M' + sx + ',' + sy + ' L' + tx + ',' + ty;
    800. 

  800.   }
    801. 

  801.   function genNodesMap(nodes) {
    802. 

  802.     const hash = {};
    803. 

  803.     nodes.map(function ({
    804. 

  804.       id,
    805. 

  805.       name
    806. 

  806.     }) {
    807. 

  807.       hash[id] = {
    808. 

  808.         id,
    809. 

  809.         name
    810. 

  810.       };
    811. 

  811.     });
    812. 

  812.     return hash;
    813. 

  813.   }
    814. 

  814.   // 处理节点文字换行
    815. 

  815.   function textBreaking(d3text, text) {
    816. 

  816.     const len = text.length
    817. 

  817.     if (len <= 3) {
    818. 

  818.       d3text.append('tspan')
    819. 

  819.         .attr('x', 0)
    820. 

  820.         .attr('y', -3)
    821. 

  821.         .text(text)
    822. 

  822.     } else {
    823. 

  823.       const topText = text.substring(0, 3)
    824. 

  824.       const midText = text.substring(3, 7)
    825. 

  825.       let botText = text.substring(7, len)
    826. 

  826.       let topY = -22
    827. 

  827.       let midY = 8
    828. 

  828.       let botY = 34
    829. 

  829.       if (len <= 9) {
    830. 

  830.         topY += 10
    831. 

  831.         midY += 10
    832. 

  832.       } else {
    833. 

  833.         botText = text.substring(7, 9) + '...'
    834. 

  834.       }
    835. 

  835.       d3text.text('')
    836. 

  836.       d3text.append('tspan')
    837. 

  837.         .attr('x', 0)
    838. 

  838.         .attr('y', topY)
    839. 

  839.         .text(function () {
    840. 

  840.           return topText
    841. 

  841.         })
    842. 

  842.       d3text.append('tspan')
    843. 

  843.         .attr('x', 0)
    844. 

  844.         .attr('y', midY)
    845. 

  845.         .text(function () {
    846. 

  846.           return midText
    847. 

  847.         })
    848. 

  848.       d3text.append('tspan')
    849. 

  849.         .attr('x', 0)
    850. 

  850.         .attr('y', botY - 7)
    851. 

  851.         .text(function () {
    852. 

  852.           return botText
    853. 

  853.         })
    854. 

  854.     }
    855. 

  855.   }
    856. 

  856.   // ticked
    857. 

  857.   function ticked() {
    858. 

  858.     // 连线路径
    859. 

  859.     links
    860. 

  860.       .attr('d', link => genLinkPath(link))
    861. 

  861.     // 连线文字位置
    862. 

  862.     linksText
    863. 

  863.       .attr('x', function (d) { return (d.source.x + d.target.x) / 2 })
    864. 

  864.       .attr('y', function (d) { return (d.source.y + d.target.y) / 2 })
    865. 

  865.     // 节点位置
    866. 

  866.     gs
    867. 

  867.       .attr('transform', function (d) { return 'translate(' + d.x + ',' + d.y + ')' })
    868. 

  868.   }
    869. 

  869.   // drag
    870. 

  870.   function started(d) {
    871. 

  871.     if (!d3.event.active) {
    872. 

  872.       forceSimulation.alphaTarget(0.8).restart() // 设置衰减系数，对节点位置移动过程的模拟，数值越高移动越快，数值范围[0, 1]
    873. 

  873.     }
    874. 

  874.     d.fx = d.x
    875. 

  875.     d.fy = d.y
    876. 

  876.   }
    877. 

  877.   function dragged(d) {
    878. 

  878.     d.fx = d3.event.x
    879. 

  879.     d.fy = d3.event.y
    880. 

  880.   }
    881. 

  881.   function ended(d) {
    882. 

  882.     if (!d3.event.active) {
    883. 

  883.       forceSimulation.alphaTarget(0)
    884. 

  884.     }
    885. 

  885.     d.fx = null
    886. 

  886.     d.fy = null
    887. 

  887.   }
    888. 

  888. </script>
    889. 

  889. 

  890. </html>
    891.