SocialNetworks_duan/src/views/GroupEvolution/component/groupGraph.vue

<template>
  <div class="groupGraph-component">
    <img src="@/assets/images/groupEvolution/graph-title.png" class="titleImage" />
    <div class="container" id="container"></div>
    <div class="timeList">
      <TimeAxis
        v-if="timeList.length"
        :time-list="timeList"
        :is-auto-play="false"
        :start-time="new Date(timeList[0])"
        :end-time="new Date(timeList[timeList.length - 1])"
        @click:pointerDown="handlePointerDown"
        @slide:pointerUp="handlePointerDown"
      ></TimeAxis>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, onUnmounted, ref, toRaw, watch } from "vue"
import { storeToRefs } from "pinia"
import { convertToUtcIsoString } from "@/utils/transform"
import { paintNodeFunction, paintLineFunction } from "@/utils/customePaint"
import { demoData } from "@/assets/customeGraph/data"
import TimeAxis from "@/components/timeAxis.vue"
import GraphVis from "@/assets/package/graphvis.esm.min.js"
const props = defineProps({
  store: {
    required: true
  }
})
const emit = defineEmits(["click:pointerDownAndSlide"])
const { timeList, graph } = storeToRefs(props.store)
let graphVis = null
let forceSimulator = null
let currentSelectNode = ref(null)
const defaultConfig = {
  node: {
    label: {
      show: true,
      font: "normal 14px KaiTi",
      color: "250,250,250",
      textPosition: "Bottom_Center", //Middle_Center
      textOffsetY: 10
    },
    shape: "circle",
    size: 30,
    color: "120,120,240",
    borderColor: "200,50,50",
    borderWidth: 0,
    selected: {
      borderWidth: 2,
      borderColor: "100,250,100",
      showShadow: true, // 是否展示阴影
      shadowBlur: 10, //阴影范围大小
      shadowColor: "50,250,30" // 选中是的阴影颜色
    }
  },
  link: {
    label: {
      // 连线标签
      show: false, // 是否显示
      color: "245,245,245", // 字体颜色
      font: "normal 11px KaiTi", // 字体大小及类型
      background: "255,255,255" //文字背景色（设置后文字居中,一般与画布背景色一致）
    },
    lineType: "straight", // curver
    showArrow: false,
    lineWidth: 2,
    colorType: "both",
    color: "240,240,240",
    selected: {
      color: "100,250,100"
    }
  },
  highLightNeiber: true // 相邻节点高亮开关
}
const registCustomePaintFunc = () => {
  graphVis.definedNodePaintFunc(paintNodeFunction) //自定义节点绘图方法
  graphVis.definedLinkPaintFunc(paintLineFunction) //自定义关系绘图方法
}
// 处理时间轴点击事件和拉动
const handlePointerDown = (time) => {
  const utcTime = convertToUtcIsoString(time)
  emit("click:pointerDownAndSlide", utcTime)
}

const registEvents = () => {
  //全局记录包裹层元素
  const containerDom = document.getElementById("container")
  graphVis.registEventListener("node", "mouseOver", function (event, node) {
    containerDom.style.cursor = "pointer"
  })
  graphVis.registEventListener("node", "mouseOut", function (event, node) {
    containerDom.style.cursor = ""
  })
  //节点开始拖动
  graphVis.registEventListener("node", "mousedrag", function (event, node) {
    currentSelectNode.value = node

    //开始拖动，必须要设置的属性
    currentSelectNode.value.fx = node.x
    currentSelectNode.value.fy = node.y
    forceSimulator.alphaTarget(0.3).restart()
  })

  graphVis.registEventListener("node", "dblClick", function (event, node) {
    node.fx = null
    node.fy = null
    forceSimulator.alphaTarget(0.3).restart()
  })

  //拖动中
  graphVis.registEventListener("scene", "mouseDraging", function (event, client) {
    if (currentSelectNode.value != null) {
      currentSelectNode.value.fx = currentSelectNode.value.x
      currentSelectNode.value.fy = currentSelectNode.value.y
    }
  })

  graphVis.registEventListener("scene", "mouseDragEnd", function (event, client) {
    if (currentSelectNode.value != null) {
      forceSimulator.alphaTarget(0)
      //如果拖动结束需要固定拖拽的节点，则注释下面两行，保留最后拖动的位置即可
      //that.currentSelectNode.fx = null;
      //that.currentSelectNode.fy = null;
      currentSelectNode.value = null
    }
  })
}
const runForceLayout = () => {
  let viewCenter = graphVis.getViewCenter()
  let simulation = graphVis.getSimulationLayout()
  let curForceSimulator = simulation.forceSimulation()
  curForceSimulator
    .nodes(graphVis.nodes)
    .force("center", simulation.forceCenter(viewCenter.x, viewCenter.y))
    .force("charge", simulation.forceManyBody().strength(-550).theta(0.85)) // manyBodyReuse|forceManyBody .distanceMin(300).distanceMax(400).theta(0.9)
    .force("link", simulation.forceLink(graphVis.links).distance(120).strength(0.35)) //.distance(120).strength(0.15)
    .force(
      "collide",
      simulation.forceCollide().radius((d) => d.radius + 5)
    ) //.iterations(5)
    .force("x", simulation.forceX())
    .force("y", simulation.forceY())
    .alphaDecay(0.02) //设置 alpha 衰减率.迭代150，默认0.0228
    //.alphaMin(0.005) //须要在 [0, 1] 之间。若是没有指定 min 则返回当前的最小 alpha 值，默认为 0.001. 在仿真内部，会不断的减少 alpha 值直到 alpha 值小于 最小 alpha
    .velocityDecay(0.15) //默认为 0.4,较低的衰减系数可使得迭代次数更多，其布局结果也会更理性，可是可能会引发数值不稳定从而致使震荡。

  curForceSimulator.alpha(1).restart()

  curForceSimulator.on("tick", () => {
    if (graphVis) {
      graphVis.refreshView() // 刷新视图
    }
  })

  curForceSimulator.on("end", () => {
    curForceSimulator.alpha(0)
    curForceSimulator.stop()
  })
  forceSimulator = curForceSimulator
}
// 添加更新图表的函数
const updateChart = (newGraphData) => {
  if (!graphVis) {
    initChart()
    return
  }
  // 清除现有图表
  graphVis.clearAll()

  // 添加新数据
  graphVis.addGraph({ ...toRaw(newGraphData) })
  graphVis.autoGroupLayout(toRaw(newGraphData).nodes)

  // 重新运行力导向布局
  runForceLayout()
}
const initChart = () => {
  const createGraph = () => {
    if (!graphVis) {
      graphVis = new GraphVis({
        container: document.getElementById("container"),
        licenseKey: "hbsy",
        config: defaultConfig
      })
    }
    graphVis.setDragHideLine(false) //拖拽时隐藏连线
    graphVis.setShowDetailScale(0.1) //展示细节的比例
    graphVis.setZoomRange(0.05, 5) //缩放区间
    registCustomePaintFunc() //注册自定义绘图方法
    registEvents()
  }

  createGraph()
  graphVis.addGraph({ ...toRaw(graph.value) })
  runForceLayout()
}

let lastLength = 0 //记录上一次的长度
watch(
  graph,
  (newValue) => {
    if (newValue && newValue.nodes.length > lastLength) {
      updateChart(newValue)
    }
    lastLength = newValue.nodes.length
  },
  { deep: true }
)

onUnmounted(() => {
  if (graphVis) {
    graphVis.destroy() // 如果 GraphVis 提供了销毁方法
    graphVis = null
  }
})
</script>

<style scoped lang="less">
.groupGraph-component {
  width: 100%;
  height: 100%;
  position: relative;
  .titleImage {
    margin: 0 auto;
  }
  .container {
    width: 100%;
    height: 503px;
  }
  .timeList {
    width: 95%;
    height: 42px;
    position: absolute;
    left: 20px;
    bottom: 20px;
    z-index: 1;
  }
}
</style>