沁心崖 沁心崖

d3力导向图

/

1. html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <title>d3力导向图</title>
  8.   <script src='http://d3js.org/d3.v4.min.js' charset='utf-8'></script>
  9.   <script src='./draw.js' charset='utf-8'></script>
  10.   <script src='./dataCollation.js' charset='utf-8'></script>
  11. </head>
  12. <body>
  13.     <div id="canvas" style="height:600px; width: 1000px;"></div>
  14.     <script>
  15.       // 图表数据
  16.       var json = {
  17.         nodes: [
  18.           { id: 1, labels: 'WIFI', name: 'WIFI1' },
  19.           { id: 2, labels: 'WIFI', name: 'WIFI2' },
  20.           { id: 3, labels: 'WIFI', name: 'WIFI3' },
  21.           { id: 4, labels: 'WIFI', name: 'WIFI4' },
  22.           { id: 5, labels: 'WIFI', name: 'WIFI5' },
  23.           { id: 6, labels: 'WIFI', name: 'WIFI6' }
  24.         ],
  25.         edges: [
  26.           { id: 101, source: 1, target: 2, types: 'GPS' },
  27.           { id: 102, source: 1, target: 3, types: 'GPS' },
  28.           { id: 103, source: 1, target: 4, types: 'GPS' },
  29.           { id: 104, source: 4, target: 5, types: 'GPS' },
  30.           { id: 105, source: 6, target: 3, types: 'GPS' },
  31.           { id: 106, source: 6, target: 3, types: 'GPS' },
  32.           { id: 107, source: 6, target: 3, types: 'GPS' }
  33.         ]
  34.       }
  35.       // 初始化
  36.       initgraph()
  38.       function initgraph() {
  39.         // 创建svg视图
  40.         var vis = buildVis()
  41.         // 力导向图布局
  42.         var force = buildForce()
  43.         // 连接线层
  44.         var linkGroup = vis.append('g').attr('class', 'linkGroup')
  45.         // 连接线文字层
  46.         var linktextGroup = vis.append('g').attr('class', 'linktextGroup')
  47.         // 节点层
  48.         var nodeGroup = vis.append('g').attr('class', 'nodeGroup')
  49.         // 数据备份
  50.         for (const i in json.nodes) {
  51.           json.nodes[i].entire = JSON.parse(JSON.stringify(json.nodes[i]))
  52.         }
  53.         var linkmap = {}
  54.         var lGroup = {}
  55.         json.edges = collationLinksData(json.edges, linkmap, lGroup)
  56.         // 装载数据更新图
  57.         update(json)
  59.         function update(json) {
  60.           var lks = json.edges
  61.           var nodes = json.nodes
  62.           var links = []
  63.           lks.forEach((m) => {
  64.             var sourceNode = nodes.filter((n) => { return n.id === m.entire.source })[0]
  65.             if (typeof (sourceNode) === 'undefined') return
  66.             var targetNode = nodes.filter((n) => { return n.id === m.entire.target })[0]
  67.             if (typeof (targetNode) === 'undefined') return
  68.             links.push({ source: sourceNode.id, target: targetNode.id, entire: m.entire, id: m.id, linknum: m.linknum })
  69.           })
  70.           json.edges = links
  71.           // 整理节点
  72.           force.nodes(json.nodes)
  73.           // 整理连线
  74.           force.force('link').links(json.edges)
  75.           // 画连线
  76.           var link = buildLink(json, linkGroup)
  77.           // 画连线文字
  78.           var linetext = buildLinktext(json, linktextGroup)
  79.           // 画节点
  80.           var node = buildNode(json, nodeGroup)
  81.           // 绑定节点点击事件
  82.           var nodeClick = bindNodeClick(node)
  83.           // 绑定拖拽
  84.           node.call(nodeDrag(force))
  85.           force.on('tick', () => (buildTick(link, node, linetext)))
  86.           force.alphaTarget(0).restart()
  87.           // 向前推动力导向，确定节点位置坐标
  88.           advance(force, 1000)
  89.           // 停止力导向
  90.           force.stop()
  91.           buildTick(link, node, linetext)
  92.         }
  93.       }
  94.     </script>
  95. </body>
  96. </html>

2. draw.js

  1. // 创建画布
  2. function buildVis() {
  3.   d3.select('#canvas').select('*').remove()
  4.   const zoom = d3.zoom().scaleExtent([0.01, 5]).on('zoom', () => { vis.attr('transform', () => (d3.event.transform)) })
  5.   const vis = d3.select('#canvas')
  6.     .append('svg')
  7.     .attr('width', '100%')
  8.     .attr('height', '100%')
  9.     .call(zoom)
  10.     .on('dblclick.zoom', null)
  11.     .append('g')
  12.     .attr('class', 'all')
  14.   // 箭头
  15.   vis.append('marker')
  16.     .attr('id', 'arrow')
  17.     .attr('markerWidth', 5)
  18.     .attr('markerHeight', 5)
  19.     .attr('viewBox', '0 -5 10 10')
  20.     .attr('refX', 8)
  21.     .attr('refY', 0)
  22.     .attr('orient', 'auto')
  23.     .append('path')
  24.     .attr('d', 'M0,-5L10,0L0,5')
  25.     .attr('fill', '#fce6d4')
  27.   // 图标
  28.   const path = 'm2.37978,3.80176c-0.71942,-0.38369 -0.33573,-1.10311 0,-1.43883c0.43165,-0.43165 0.95922,-1.91845 0.95922,-1.91845c0.8633,-0.38369 0.95922,-1.00718 1.05515,-1.43883c0.38369,-1.24699 -0.57553,-1.43883 -0.57553,-1.43883s0.76738,-2.06233 0.14388,-3.64505c-0.81534,-2.06233 -4.12466,-2.82971 -4.70019,-0.91126c-3.93281,-0.8633 -3.11747,4.55631 -3.11747,4.55631s-0.95922,0.19184 -0.57553,1.43883c0.09592,0.43165 0.19184,1.05515 1.05515,1.43883c0,0 0.52757,1.4868 0.95922,1.91845c0.33573,0.33573 0.71942,1.05515 0,1.43883c-1.43883,0.76738 -5.75534,0.95922 -5.75534,4.3165l16.30679,0c0,-3.35728 -4.3165,-3.54912 -5.75534,-4.3165z'
  29.   vis.append('defs').append('g').attr('id', 'user').append('path').attr('d', path)
  31.   return vis
  32. }
  34. // 创建力布局
  35. function buildForce() {
  36.   return d3.forceSimulation()
  37.     .force('link', d3.forceLink().distance(200).id((d) => { return d.id }))
  38.     .force('charge', d3.forceManyBody().strength(-400))
  39.     // 力的中心点
  40.     .force('center', d3.forceCenter(500 / 2, 500 / 2))
  41.     .force('collide', d3.forceCollide().strength(-30))
  42. }
  44. // 创建连线
  45. function buildLink(json, linkGroup) {
  46.   let link = linkGroup.selectAll('.line').data(json.edges, (d) => { return d.entire.id })
  47.   link.exit().remove()
  48.   link = link.enter().append('path')
  49.     .attr('stroke-width', 2)
  50.     .attr('class', 'line')
  51.     .style('stroke', '#ccc')
  52.     .style('cursor', 'pointer')
  53.     .attr('fill', 'none')
  54.     .attr('id', (d) => { return 'line-' + d.entire.id + '-source-' + d.entire.source + '-target-' + d.entire.target })
  55.     .attr('marker-end', 'url(#arrow)')
  56.     .merge(link)
  57.   return link
  58. }
  60. // 创建连线文字
  61. function buildLinktext(json, linktextGroup) {
  62.   let linkText = linktextGroup.selectAll('text').data(json.edges, (d) => { return d.entire.id })
  63.   linkText.exit().remove()
  64.   linkText = linkText.enter().append('text')
  65.     .attr('class', (d) => { return 'linkText-' + d.entire.types })
  66.     .attr('id', (d) => { return 'linkText-' + d.entire.id + '-source-' + d.entire.source + '-target-' + d.entire.target })
  67.     .attr('dy', -5)
  68.     .style('font-size', 12)
  69.     .merge(linkText)
  71.   linkText.selectAll('.textPath').remove()
  72.   linkText.append('textPath')
  73.     .attr('startOffset', '45%')
  74.     .attr('class', (d) => { return 'textPath linetext-' + d.entire.types })
  75.     .attr('xlink:href', (d) => { return '#line-' + d.entire.id + '-source-' + d.entire.source + '-target-' + d.entire.target })
  76.     .text((d) => { return d.entire.id })
  78.   return linkText
  79. }
  81. // 创建节点
  82. function buildNode(json, nodeGroup) {
  83.   let node = nodeGroup.selectAll('.node')
  84.   node = node.data(json.nodes, (d) => { return d.id })
  85.   node.exit().remove()
  86.   node = node.enter()
  87.     .append('g')
  88.     .attr('class', 'node')
  89.     .attr('id', (d) => { return 'node-' + d.id })
  90.     .merge(node)
  92.   node.selectAll('.node-bg').remove()
  93.   node.selectAll('.node-icon').remove()
  94.   node.selectAll('.node-text').remove()
  96.   // 背景圆
  97.   node.append('circle')
  98.     .attr('class', 'node-bg')
  99.     .attr('id', (d) => { return 'nodeBg-' + d.id })
  100.     .attr('r', 24)
  101.     .style('fill', '#C1C1C1')
  102.     // .style('fill-opacity', 0.3)
  104.    // 图标
  105.    node.append('use')
  106.    .attr('class', 'node-icon')
  107.    .attr('id', (d) => { return 'nodeIcon-' + d.id })
  108.    .attr('r', 24)
  109.    .style('fill', '#FFFFFF')
  110.    .attr('xlink:href', '#user')
  113.   // 文字
  114.   node.append('text')
  115.     .attr('class', 'node-text')
  116.     .attr('id', (d) => { return 'nodeText-' + d.id })
  117.     .attr('dy', 40)
  118.     .attr('text-anchor', 'middle')
  119.     .text((d) => { return d.entire.id })
  121.   return node
  122. }
  124. // 节点拖拽
  125. function nodeDrag(force) {
  126.   // 开始拖拽
  127.   const dragstart = () => {
  128.     if (!d3.event.active) force.alphaTarget(0.3).restart()
  129.     d3.event.subject.fx = d3.event.subject.x
  130.     d3.event.subject.fy = d3.event.subject.y
  131.   }
  132.   // 正在拖拽
  133.   const dragmove = () => {
  134.     d3.event.subject.fx = d3.event.x
  135.     d3.event.subject.fy = d3.event.y
  136.   }
  137.   // 结束拖拽
  138.   const dragend = () => {
  139.     if (!d3.event.active) force.stop()
  140.   }
  142.   return d3.drag().on('start', dragstart).on('drag', dragmove).on('end', dragend)
  143. }
  145. // 更新坐标
  146. function buildTick(link, node, linetext) {
  147.   link.attr('d', (d) => {
  148.     // 如果连接线连接的是同一个实体，则对path属性进行调整，绘制的圆弧属于长圆弧，同时对终点坐标进行微调，避免因坐标一致导致弧无法绘制
  149.     if (d.target === d.source) {
  150.       const dr = 30 / d.linknum
  151.       return 'M' + d.source.x + ',' + d.source.y + 'A' + dr + ',' + dr + ' 0 1,1 ' + d.target.x + ',' + (d.target.y + 1)
  152.     } else if (d.size % 2 !== 0 && d.linknum === 1) {
  153.       // 如果两个节点之间的连接线数量为奇数条，则设置编号为1的连接线为直线，其他连接线会均分在两边
  154.       const tan = Math.abs((d.target.y - d.source.y) / (d.target.x - d.source.x))
  155.       const x1 = d.target.x - d.source.x > 0 ? Math.sqrt(24 * 24 / (tan * tan + 1)) + d.source.x : d.source.x - Math.sqrt(24 * 24 / (tan * tan + 1))
  156.       const y1 = d.target.y - d.source.y > 0 ? Math.sqrt(24 * 24 * tan * tan / (tan * tan + 1)) + d.source.y : d.source.y - Math.sqrt(24 * 24 * tan * tan / (tan * tan + 1))
  157.       const x2 = d.target.x - d.source.x > 0 ? d.target.x - Math.sqrt(24 * 24 / (1 + tan * tan)) : d.target.x + Math.sqrt(24 * 24 / (1 + tan * tan))
  158.       const y2 = d.target.y - d.source.y > 0 ? d.target.y - Math.sqrt(24 * 24 * tan * tan / (1 + tan * tan)) : d.target.y + Math.sqrt(24 * 24 * tan * tan / (1 + tan * tan))
  159.       return 'M' + x1 + ' ' + y1 + ' L ' + x2 + ' ' + y2
  160.     }
  161.     // 根据连接线编号值来动态确定该条椭圆弧线的长半轴和短半轴，当两者一致时绘制的是圆弧
  162.     // 注意A属性后面的参数，前两个为长半轴和短半轴，第三个默认为0，第四个表示弧度大于180度则为1，小于则为0，这在绘制连接到相同节点的连接线时用到；第五个参数，0表示正角，1表示负角，即用来控制弧形凹凸的方向。本文正是结合编号的正负情况来控制该条连接线的凹凸方向，从而达到连接线对称的效果
  163.     const curve = 3
  164.     const homogeneous = 1.2
  165.     const dx = d.target.x - d.source.x
  166.     const dy = d.target.y - d.source.y
  167.     let dr = Math.sqrt(dx * dx + dy * dy) * (d.linknum + homogeneous) / (curve * homogeneous)
  168.     // 圆心连线tan值
  169.     const tan = Math.abs(dy / dx)
  170.     const x1 = dx > 0 ? Math.sqrt(24 * 24 / (tan * tan + 1)) + d.source.x : d.source.x - Math.sqrt(24 * 24 / (tan * tan + 1))
  171.     const y1 = dy > 0 ? Math.sqrt(24 * 24 * tan * tan / (tan * tan + 1)) + d.source.y : d.source.y - Math.sqrt(24 * 24 * tan * tan / (tan * tan + 1))
  172.     const x2 = dx > 0 ? d.target.x - Math.sqrt(24 * 24 / (1 + tan * tan)) : d.target.x + Math.sqrt(24 * 24 / (1 + tan * tan))
  173.     const y2 = dy > 0 ? d.target.y - Math.sqrt(24 * 24 * tan * tan / (1 + tan * tan)) : d.target.y + Math.sqrt(24 * 24 * tan * tan / (1 + tan * tan))
  174.     // 当节点编号为负数时，对弧形进行反向凹凸，达到对称效果
  175.     if (d.linknum < 0) {
  176.       dr = Math.sqrt(dx * dx + dy * dy) * (-1 * d.linknum + homogeneous) / (curve * homogeneous)
  177.       return 'M' + x1 + ',' + y1 + 'A' + dr + ',' + dr + ' 0 0,0 ' + x2 + ',' + y2
  178.     }
  179.     return 'M' + x1 + ',' + y1 + 'A' + dr + ',' + dr + ' 0 0,1 ' + x2 + ',' + y2
  180.   })
  182.   node.attr('transform', (d) => ('translate(' + d.x + ',' + d.y + ')'))
  184.   // 连线文字角度
  185.   linetext.attr('transform', (d) => {
  186.     if (d.target.x < d.source.x) {
  187.       const { x, y, width, height } = document.getElementById('linkText-' + d.entire.id + '-source-' + d.entire.source + '-target-' + d.entire.target).getBBox()
  188.       const rx = x + width / 2
  189.       const ry = y + height / 2
  190.       return 'rotate(180 ' + rx + ' ' + ry + ')'
  191.     } else {
  192.       return 'rotate(0)'
  193.     }
  194.   })
  195. }
  197. // 向前推动力导向，确定节点位置坐标
  198. function advance(force, num) {
  199.   for (let i = 0, n = num; i < n; ++i) {
  200.     force.tick()
  201.   }
  202. }
  204. function bindNodeClick(node) {
  205.   // 单击
  206.   node.on('click', (d) => {
  207.     console.log('单击')
  208.   })
  209.   // 双击
  210.   node.on('dblclick', (d) => {
  211.     console.log('双击')
  212.   })
  213.   // 右击
  214.   node.on('contextmenu', (d) => {
  215.     console.log('右击')
  216.   })
  217. }

3. dataCollation.js

  1. // 整理连接线关系
  2. function collationLinksData(links, linkmap, lGroup) {
  3.   const arr = []
  4.   for (const i in links) {
  5.     arr.push({
  6.       source: links[i].source,
  7.       target: links[i].target,
  8.       id: links[i].id,
  9.       entire: links[i]
  10.     })
  11.   }
  12.   // 对连接线进行统计和分组，不区分连接线的方向，只要属于同两个实体，即认为是同一组
  13.   for (var i = 0; i < arr.length; i++) {
  14.     const key = arr[i].source < arr[i].target ? arr[i].source + '-' + arr[i].target : arr[i].target + '-' + arr[i].source
  15.     if (!linkmap.hasOwnProperty(key)) {
  16.       linkmap[key] = 0
  17.     }
  18.     linkmap[key] += 1
  19.     if (!lGroup.hasOwnProperty(key)) {
  20.       lGroup[key] = []
  21.     }
  22.     lGroup[key].push(arr[i])
  23.   }
  24.   // 为每一条连接线分配size属性，同时对每一组连接线进行编号
  25.   for (var i = 0; i < arr.length; i++) {
  26.     const key = arr[i].source < arr[i].target ? arr[i].source + '-' + arr[i].target : arr[i].target + '-' + arr[i].source
  27.     arr[i].size = linkmap[key]
  28.     // 同一组的关系进行编号
  29.     const group = lGroup[key]
  30.     const keyPair = key.split('-')
  31.     // 标示该组关系是指向两个不同实体还是同一个实体
  32.     let type = 'noself'
  33.     if (keyPair[0] === keyPair[1]) {
  34.       type = 'self'
  35.     }
  36.     // 给节点分配编号
  37.     setLinkNumber(group, type)
  38.   }
  39.   return arr
  40. }
  42. // 给节点分配编号 linknum
  43. function setLinkNumber(group, type) {
  44.   if (group.length === 0) return
  45.   // 对该分组内的关系按照方向进行分类，此处根据连接的实体ASCII值大小分成两部分
  46.   const linksA = []
  47.   const linksB = []
  48.   for (let i = 0; i < group.length; i++) {
  49.     const link = group[i]
  50.     if (link.source < link.target) {
  51.       linksA.push(link)
  52.     } else {
  53.       linksB.push(link)
  54.     }
  55.   }
  56.   // 确定关系最大编号。为了使得连接两个实体的关系曲线呈现对称，根据关系数量奇偶性进行平分。
  57.   // 特殊情况：当关系都是连接到同一个实体时，不平分
  58.   let maxLinkNumber = 0
  59.   if (type === 'self') {
  60.     maxLinkNumber = group.length
  61.   } else {
  62.     maxLinkNumber = group.length % 2 === 0 ? group.length / 2 : (group.length + 1) / 2
  63.   }
  64.   // 如果两个方向的关系数量一样多，直接分别设置编号即可
  65.   if (linksA.length === linksB.length) {
  66.     let startLinkNumber = 1
  67.     for (let i = 0; i < linksA.length; i++) {
  68.       linksA[i].linknum = startLinkNumber++
  69.     }
  70.     startLinkNumber = 1
  71.     for (let i = 0; i < linksB.length; i++) {
  72.       linksB[i].linknum = startLinkNumber++
  73.     }
  74.   } else {
  75.     // 当两个方向的关系数量不对等时，先对数量少的那组关系从最大编号值进行逆序编号，然后在对另一组数量多的关系从编号1一直编号到最大编号，再对剩余关系进行负编号
  76.     // 如果抛开负号，可以发现，最终所有关系的编号序列一定是对称的（对称是为了保证后续绘图时曲线的弯曲程度也是对称的）
  77.     var biggerLinks, smallerLinks
  78.     if (linksA.length > linksB.length) {
  79.       biggerLinks = linksA
  80.       smallerLinks = linksB
  81.     } else {
  82.       biggerLinks = linksB
  83.       smallerLinks = linksA
  84.     }
  85.     let startLinkNumber = maxLinkNumber
  86.     for (let i = 0; i < smallerLinks.length; i++) {
  87.       smallerLinks[i].linknum = startLinkNumber--
  88.     }
  89.     const tmpNumber = startLinkNumber
  90.     startLinkNumber = 1
  91.     let p = 0
  92.     while (startLinkNumber <= maxLinkNumber) {
  93.       biggerLinks[p++].linknum = startLinkNumber++
  94.     }
  95.     // 开始负编号
  96.     startLinkNumber = 0 - tmpNumber
  97.     for (let i = p; i < biggerLinks.length; i++) {
  98.       biggerLinks[i].linknum = startLinkNumber++
  99.     }
  100.   }
  101. }

效果图

20uWnO.png

转载请注明作者和出处，并添加本页链接。
原文链接: //v2ci.com/21.html

下一篇：JavaScript实现冒泡排序法

上一篇：JavaScript 中如何实现大文件并发上传？