zbcx_ckyc 1.0.0

package/src/plugins/app/modelmanagement/D3DrawGraph.js

@@ -0,0 +1,708 @@
+import * as d3 from 'd3'
+
+/**
+ * 类名：DrawGraph
+ * 描述：D3绘导向图组织类
+ * 作者：王卫
+ * 时间：20230601
+ */
+class DrawGraph
+{
+  /**
+     * 构造函数
+     * @param {视图} chart
+     */
+  constructor(chart)
+  {
+    this.g = null
+    this.svg = d3.select(chart)
+      .append('svg')
+      .attr('width', '100%')
+      .attr('height', '100%')
+      .attr('preserveAspectRatio', 'xMidYMid meet')  // 控制缩放形式
+      .on('click', this.clickCancel.bind(this))
+      .on('mousedown', (event) =>
+      {
+        if (event.button === 1)
+        
+          this.resetCentor()
+      })
+
+    this.zoom = d3.zoom()
+    this.simulation = null
+    this.table = null
+    this.id = ''
+    this.color = d3.scaleOrdinal().range(d3.schemeCategory10)
+    this.strength = 2000
+  }
+
+  /**
+     * 清空视图
+     */
+  clearChart()
+  {
+    // 重置缩放事件
+    this.zoom.scaleTo(this.svg, 1)
+    this.zoom.translateTo(this.svg, 0, 0)
+    this.svg.call(this.zoom.transform, d3.zoomTransform(this.svg).scale(1))
+
+    // 移除所有内容
+    this.svg.selectAll('*').remove()
+    this.g = null
+    this.id = ''
+    this.table = null
+  }
+
+  /**
+     * 获得当前激活节点
+     * @returns 返回节点id
+     */
+  getCurNode()
+  {
+    return this.id
+  }
+
+  /**
+     * 设置斥力
+     * @param {} strength 斥力参数
+     */
+  setStrength(strength)
+  {
+    this.strength = strength
+  }
+
+  /**
+   * 获取连接线数据
+   * @returns {Array} 连接线数据数组
+   */
+  getLinkData()
+  {
+    const links = this.g.selectAll('line').data()
+    const data = []
+
+    for (const link of links)
+    {
+      data.push(link.source.id)
+      data.push(link.target.id)
+    }
+
+    return data
+  }
+
+  /**
+   * 获取所有节点
+   * @returns {Array} 节点ID数组
+   */
+  getAllNode()
+  {
+    const nodes = this.g.selectAll('.node')
+    const data = []
+    for (const node of nodes)
+
+      data.push(node.id)
+
+    return data
+  }
+
+  /**
+     * 绘图接口
+     * @param {} nodes 顶点集合
+     * @param {} links 顶点关系集合
+     */
+  drawChart(nodes, links)
+  {
+    if (!this.g)
+    
+      this.g = this.svg.append('g')
+    
+
+    const color = this.color
+    this.simulation = d3
+      .forceSimulation(nodes)
+      .force(
+        'link',
+        d3.forceLink(links).id((d) => d.id)
+      )
+      .force('charge', d3.forceManyBody().strength(-this.strength))
+      .force('center', d3.forceCenter())
+    const simulation = this.simulation
+
+    // 绘制svg
+    this.setSvg()
+
+    // 绘制连接线标签
+    const linkLabel = this.drawLinkLabel(links)
+
+    // 绘制连接线
+    const link = this.drawLink(links)
+
+    // 绘制表格
+    this.table = this.drawTable()
+
+    // 绘制节点
+    const node = this.drawNode(simulation, color, nodes)
+
+    // 位置计算
+    simulation.on('tick', () =>
+    {
+      this.drawSimulation(node, link, linkLabel)
+    })
+
+    // 绘制图例
+    const nodeLabels = Array.from(new Set(nodes.map((node) => node.label)))
+    this.drawLegend(color, nodeLabels)
+
+    // 设置缩放
+    this.setZoom()
+  }
+
+  /**
+     * 新增顶点
+     * @param {} nodes 顶点集合
+     * @param {} links 顶点关系集合
+     * @returns 是否添加成功
+     */
+  addChart(nodes, links)
+  {
+    const color = this.color
+    const simulation = this.simulation
+
+    // 计算未加载的连接线
+    const haslinks = this.g.selectAll('line').data()
+    const haslinkdata = haslinks.map(d => ({ source: d.source, target: d.target }))
+
+    let filterlink = links.filter(d =>
+    {
+      const exists = haslinkdata.find(hd =>
+      {
+        return hd.source.id != d.source || hd.target.id != d.target
+      })
+      return exists
+    })
+
+    if (haslinks.length === 0)
+    
+      filterlink = links
+    
+
+    // 计算未加载的顶点
+    const hasNodes = this.g.selectAll('.node').nodes()
+    const hasnodedata = hasNodes.map(node => node.id)
+    const filternodes = []
+    for (const curnode of nodes)
+    {
+      if (!hasnodedata.includes(curnode.id))
+      
+        filternodes.push(curnode)
+    }
+
+    if (filternodes.length === 0)
+    
+      return false
+    
+
+    // 绘制标签
+    this.drawLinkLabel(filterlink)
+
+    // 绘制连接线
+    this.drawLink(filterlink)
+
+    // 绘制顶点
+    this.drawNode(simulation, color, filternodes)
+
+    // 将所有节点重新添加到力学模拟中
+    const allnode = this.g.selectAll('.node')
+    const alllinkLabel = this.g.selectAll('.link-label')
+    const alllink = this.g.selectAll('line')
+    const nodedata = allnode.data()
+    const linkdata = alllink.data()
+
+    // 并重新绑定tick事件
+    simulation.nodes(nodedata)
+      .force('link', d3.forceLink(linkdata).id(d => d.id))
+      .on('tick', () =>
+      {
+        this.drawSimulation(allnode, alllink, alllinkLabel)
+      })
+      .alpha(1)
+      .restart()
+
+    // 绘制图例
+    const nodeLabels = Array.from(new Set(nodedata.map((node) => node.label)))
+    this.drawLegend(color, nodeLabels)
+
+    return true
+  }
+
+  /**
+     * 定位顶点
+     * @param {} name 顶点名称
+     * @returns
+     */
+  locateNode(name)
+  {
+    if (!this.g)
+      return false
+
+    const nodes = this.g.selectAll('.node').nodes()
+    const targetNode = nodes.find(node => node.id === name)
+
+    if (targetNode)
+    {
+      const data = targetNode.__data__
+      const x = -data.x
+      const y = -data.y
+      const id = targetNode.id
+      this.zoom.transform(this.svg, d3.zoomIdentity.translate(x, y))
+
+      const allnode = this.g.selectAll('.node')
+      allnode.classed('highlighted', d => d.id === id)
+        .select('circle')
+        .style('stroke-width', d => (d.id === id ? '8px' : '0px'))
+
+      return true
+    }
+    else
+    
+      return false
+  }
+
+  /**
+   * 重置中心点
+   */
+  resetCentor()
+  {
+    this.zoom.transform(this.svg, d3.zoomIdentity.translate(0, 0))
+  }
+
+  /**
+   * 设置缩放功能
+   */
+  setZoom()
+  {
+    const svg = this.svg
+    const g = this.g
+
+    // 1. 获取 SVG 图形的宽度和高度
+    const svgWidth = svg.node().getBoundingClientRect().width
+    const svgHeight = svg.node().getBoundingClientRect().height
+
+    // 2.设置缩放范围和初始缩放比例
+    this.zoom.scaleExtent([0.1, 10]).on('zoom', zoomed)
+    svg.call(this.zoom)
+    this.resetCentor()
+
+    function zoomed()
+    {
+      const transform = d3.zoomTransform(svg.node())
+      const scale = transform.k
+      const translateX = transform.x + (svgWidth * scale) / 2
+      const translateY = transform.y + (svgHeight * scale) / 2
+      g.attr('transform', d3.zoomIdentity.translate(translateX, translateY).scale(scale))
+    }
+  }
+
+  /**
+     * 设置svg属性
+     */
+  setSvg()
+  {
+    this.g
+      .append('defs')
+      .selectAll('marker')
+      .data(['arrow'])
+      .enter()
+      .append('marker')
+      .attr('id', (d) => d)
+      .attr('markerWidth', 10)
+      .attr('markerHeight', 10)
+      .attr('markerUnits', 'userSpaceOnUse')
+      .attr('viewBox', '0 -5 10 10')
+      .attr('refX', 45)
+      .attr('refY', 0)
+      .attr('orient', 'auto')
+      .append('path')
+      .attr('d', 'M0,-5L10,0L0,5')
+      .attr('fill', 'gray')
+      .attr('transform', 'translate(0,0)')
+  }
+
+  /**
+     * 绘制图例
+     * @param {} color 颜色集合
+     * @param {} nodeLabels 标签集合
+     */
+  drawLegend(color, nodeLabels)
+  {
+    this.svg.selectAll('.legend').remove()
+    const legend = this.svg
+      .append('g')
+      .attr('class', 'legend')
+      .attr('transform', 'translate(10,10)')
+
+    // 循环添加每个图例项
+    nodeLabels.forEach((label, index) =>
+    {
+      const legendItem = legend
+        .append('g')
+        .attr('class', 'legend-item')
+        .attr('transform', `translate(0,${index * 30})`)
+
+      legendItem
+        .append('rect')
+        .attr('x', 0)
+        .attr('y', 0)
+        .attr('width', 60)
+        .attr('height', 20)
+        .attr('selected', 1)
+        .attr('label', label)
+        .attr('color', color(label))
+        .style('fill', color(label))
+        .style('stroke', 'black')
+        .on('click', handleLegendItemClick)
+
+      legendItem
+        .append('text')
+        .attr('x', 65)
+        .attr('y', 15)
+        .text(label)
+        .attr('text-anchor', 'start')
+        .attr('font-size', 15)
+    })
+
+    const g = this.g
+    function handleLegendItemClick()
+    {
+      const itemRect = d3.select(this)
+      const isSelect = itemRect.attr('selected')
+      const label = itemRect.attr('label')
+      const nodes = g.selectAll('.node')
+      const links = g.selectAll('line')
+      const linkLabels = g.selectAll('.link-label')
+
+      if (isSelect == 1)
+      {
+        itemRect
+          .style('fill', 'white')
+          .attr('selected', 0)
+        nodes.filter(d => d.label === label).style('display', 'none')
+        links.filter(d => d.source.label === label || d.target.label === label).style('display', 'none')
+        linkLabels.filter(d => d.source.label === label || d.target.label === label).style('display', 'none')
+      }
+      else
+      {
+        const color = itemRect.attr('color')
+        itemRect
+          .style('fill', color)
+          .attr('selected', 1)
+        nodes.filter(d => d.label === label).style('display', 'block')
+        links.filter(d => d.source.label === label || d.target.label === label).style('display', 'block')
+        linkLabels.filter(d => d.source.label === label || d.target.label === label).style('display', 'block')
+      }
+    }
+  }
+
+  /**
+     * 绘制顶点
+     * @param {} simulation 模拟器
+     * @param {} color 颜色集合
+     * @param {} nodes 顶点集合
+     * @returns 顶点
+     */
+  drawNode(simulation, color, nodes)
+  {
+    const table = this.table
+    const node = this.g
+      .append('g')
+      .selectAll('g')
+      .data(nodes)
+      .enter()
+      .append('g')
+      .attr('class', 'node')
+      .attr('id', (d) => d.id)
+      .attr('label', (d) => d.label)
+      .call(this.drag(simulation))
+      .on('click', (event, d) => handClick.call(this, event, d))
+
+    node
+      .append('circle')
+      .attr('r', 35)
+      .attr('fill', (d) => color(d.label))
+      .attr('class', 'circle')
+      .style('stroke', 'rgba(255, 210, 0)')
+      .style('stroke-width', '0px')
+
+    node
+      .append('text')
+      .attr('dx', 0)
+      .attr('dy', '.35em')
+      .style('fill', 'white')
+      .style('font-size', '12px')
+      .style('text-anchor', 'middle')
+      .text((d) => this.truncateText(d.name, 5))
+
+    function handClick(event, target)
+    {
+      const id = target.id
+      const name = target.name
+      const label = target.label
+      const properties = JSON.parse(target.properties)
+      this.id = target.id
+      this.orinode = name
+      const data = [
+        { key: '名称:', value: name },
+        { key: '标签:', value: label },
+        { key: 'x:', value: Math.round(target.x) },
+        { key: 'y:', value: Math.round(target.y) }
+      ]
+
+      // 遍历properties并添加到data
+      for (let key in properties)
+      
+        data.push({ key: `${key}:`, value: properties[key] })
+      
+
+      table.selectAll('g.row').remove()
+
+      // 创建表格行
+      const rows = table
+        .selectAll('g.row')
+        .data(data)
+        .enter()
+        .append('g')
+        .attr('class', 'row')
+        .attr('transform', (d, i) => `translate(0, ${i * 30 + 20})`)
+
+      // 创建单元格并填充数据
+      rows
+        .selectAll('text')
+        .data((d) => [d.key, d.value])
+        .enter()
+        .append('text')
+        .attr('x', (d, i) => i * 120)
+        .text((d) => d)
+        .style('font-size', '16px')
+        .style('font-weight', 'bold')
+
+      const allnode = this.g.selectAll('.node')
+      allnode.classed('highlighted', d => d.id === id)
+        .select('circle')
+        .style('stroke-width', d => (d.id === id ? '8px' : '0px'))
+
+      const alllink = this.g.selectAll('line')
+      alllink
+        .attr('stroke', (link) =>
+        {
+          if (link.source.id == id)
+          
+            return 'red'
+          
+          else if (link.target.id == id)
+          
+            return 'blue'
+          
+          else
+          
+            return 'gray'
+        })
+
+      event.stopPropagation() // 阻止事件冒泡
+    }
+
+    return node
+  }
+
+  /**
+     * 绘制连接线
+     * @param {} links 顶点关系集合
+     * @returns 连接线
+     */
+  drawLink(links)
+  {
+    const link = this.g
+      .insert('g', ':first-child')
+      .selectAll('line')
+      .data(links)
+      .enter()
+      .append('line')
+      .attr('stroke', 'gray')
+      .attr('marker-end', 'url(#arrow)')
+
+    return link
+  }
+
+  /**
+   * 添加连接线
+   * @param {Array} links 连接线数据
+   * @returns {Object} 连接线元素
+   */
+  addLink(links)
+  {
+    const link = this.drawlinks(links)
+    link
+      .filter((d, i, arr) =>
+      {
+        // 判断是否有重复线
+        const source = d.source.id
+        const target = d.target.id
+        for (let j = 0; j < i; j++)
+        {
+          const link = arr[j]
+          if ((link.source.id === source && link.target.id === target) ||
+                        (link.source.id === target && link.target.id === source))
+
+            return false
+        }
+        return true
+      })
+    return link
+  }
+
+  /**
+     * 绘制顶点标签
+     * @param {} links 顶点关系集合
+     * @returns 顶点标签
+     */
+  drawLinkLabel(links)
+  {
+    const linkLabel = this.g
+      .insert('g', ':first-child')
+      .selectAll('linklabel')
+      .data(links)
+      .enter()
+      .append('g')
+      .attr('class', 'link-label')
+
+    linkLabel
+      .append('rect')
+      .attr('width', 60)
+      .attr('height', 20)
+      .attr('fill', 'white')
+      .attr('stroke', 'white')
+      .attr('alignment-baseline', 'central')
+      .attr('transform', 'translate(-30,-10)')
+
+    linkLabel
+      .append('text')
+      .text((d) => d.label)
+      .attr('x', 0)
+      .attr('y', 5)
+      .attr('text-anchor', 'middle')
+      .attr('font-size', 12)
+      .attr('fill', 'blue')
+
+    return linkLabel
+  }
+
+  /**
+     * 位置计算
+     * @param {} simulation 模拟器
+     * @param {} node 顶点
+     * @param {} link 连接线
+     * @param {} linkLabel 连接线标签
+     */
+  drawSimulation(node, link, linkLabel)
+  {
+    link
+      .attr('x1', (d) => d.source.x)
+      .attr('y1', (d) => d.source.y)
+      .attr('x2', (d) => d.target.x)
+      .attr('y2', (d) => d.target.y)
+    node.attr('transform', (d) => `translate(${d.x},${d.y})`)
+
+    linkLabel.attr('transform', (d) =>
+    {
+      let x = (d.source.x + d.target.x) / 2
+      let y = (d.source.y + d.target.y) / 2
+      const angle =
+                (Math.atan2(d.target.y - d.source.y, d.target.x - d.source.x) *
+                    180) /
+                Math.PI
+      return `translate(${x}, ${y}) rotate(${angle})`
+    })
+  }
+
+  /**
+   * 绘制表格
+   * @returns {Object} 表格元素
+   */
+  drawTable()
+  {
+    // 添加一个包含表格的 g 元素
+    const table = this.svg
+      .append('g')
+      .attr('transform', `translate(200, 5)`)
+
+    return table
+  }
+
+  /**
+     * 替换标签，控制标签显示长度
+     * @param {} text 标签
+     * @param {} maxLength 最大长度
+     * @returns 替换标签
+     */
+  truncateText(text, maxLength)
+  {
+    let truncated = text
+    if (text.length > maxLength)
+    
+      truncated = text.slice(0, maxLength - 1) + '...'
+    
+    return truncated
+  }
+
+  /**
+     * 拖拽捕捉
+     * @param {} simulation 模拟器
+     * @returns 拖拽位置
+     */
+  drag(simulation)
+  {
+    function dragstarted(event)
+    {
+      if (!event.active) simulation.alphaTarget(0.3).restart()
+      event.subject.fx = event.subject.x
+      event.subject.fy = event.subject.y
+    }
+    function dragged(event)
+    {
+      event.subject.fx = event.x
+      event.subject.fy = event.y
+    }
+    function dragended(event)
+    {
+      if (!event.active) simulation.alphaTarget(0)
+      event.subject.fx = null
+      event.subject.fy = null
+    }
+    return d3
+      .drag()
+      .on('start', dragstarted)
+      .on('drag', dragged)
+      .on('end', dragended)
+  }
+
+  /**
+   * 取消点击选中状态
+   */
+  clickCancel()
+  {
+    if (this.g)
+    {
+      this.g.selectAll('line').attr('stroke', 'gray')
+      this.g.selectAll('.circle').style('stroke-width', '0px')
+    }
+
+    if (this.table)
+
+      this.table.selectAll('g.row').remove()
+
+
+    this.id = ''
+  }
+}
+
+
+export default DrawGraph
+