3D知识图谱可视化

    vue create 3d-graph-demo

    npm i -S 3d-force-graph

    import ForceGraph3D from '3d-force-graph'
    // threejs的精灵标签，用于文字的展示
    import SpriteText from 'three-spritetext'

    // 3d初始化，包括数据解析、数据渲染
    threeInit () {
      this.neoJsonParser(this.graph)
      this.threeRender()
    }

    /*eslint-disable*/
    neoJsonParser (json) {
      const nodes =[]
      const links = [] // 存放节点和关系
      const nodeSet = [] // 存放去重后nodes的id
    
      for (let item of json) {
    for (let segment of item.p.segments) {
      // 重新更改data格式
      if (nodeSet.indexOf(segment.start.identity) == -1) {
        nodeSet.push(segment.start.identity)
        nodes.push({
          id: segment.start.identity,
          label: segment.start.labels[0],
          properties: segment.start.properties
        })
      }
      if (nodeSet.indexOf(segment.end.identity) == -1) {
        nodeSet.push(segment.end.identity)
        nodes.push({
          id: segment.end.identity,
          label: segment.end.labels[0],
          properties: segment.end.properties
        })
      }
      links.push({
        source: segment.relationship.start,
        target: segment.relationship.end,
        type: segment.relationship.type,
        properties: segment.relationship.properties
      })
    }
      }
      console.log(nodes)
      console.log(links)
      this.links = links
      this.nodes = nodes
      this.data = { nodes, links }
    }

    threeRender () {
      // DOM初始化及数据挂载
      const elm = document.getElementById('3d-graph')
      this.Graph = ForceGraph3D()(elm)
    .graphData(this.data)
    
      // 设置画布样式、节点及关系样式、事件绑定等
      this.Graph.height(750).width(1200)
    .backgroundColor('#000')
    // 节点样式和标签设置
    .nodeRelSize(7)
    .nodeColor(node => {
      let index = 0
      switch(node.label) {
        case 'Enterprise': break;
        case 'Type': index = 1;break;
        case 'Region': index = 2;break;
        default: index = 3;break;
      }
      return this.nodeColors[index]
    })
    // .nodeAutoColorBy('label')
    // 给节点添加文字
    // .nodeThreeObjectExtend(true)
    .nodeThreeObject(node => {
      const sprite = new SpriteText(node.properties.name)
      sprite.material.depthWrite = false // make sprite background transparent
      // 设置文字颜色
      let index = 0
      switch(node.label) {
        case 'Enterprise': break;
        case 'Type': index = 1;break;
        case 'Region': index = 2;break;
        default: index = 3;break;
      }
      sprite.color = this.nodeColors[index]
      sprite.textHeight = 8
      return sprite
    })
    .nodeThreeObjectExtend(true)
    .nodeLabel(node => `${node.label}: ${node.properties.name}`)
    .nodeOpacity(0.75)
    // 节点事件绑定
    .onNodeHover(node => elm.style.cursor = node ? 'pointer' : null)
    .onNodeClick(node => {
      console.log(node)
      //设置#info h4样式的颜色为该节点的颜色，文本为该节点name
      this.$set(this.selectNodeData, 'id', node.id)
      this.$set(this.selectNodeData, 'name', node.properties.name)
      // 获取节点类型对应的颜色
      let index = 0
      switch(node.label) {
        case 'Enterprise': break;
        case 'Type': index = 1;break;
        case 'Region': index = 2;break;
        default: index = 3;break;
      }
      this.$set(this.selectNodeData, 'color', this.nodeColors[index])
      this.$set(this.selectNodeData, 'properties', node.properties)
    })
    // 关系样式
    // .linkColor('#bbb')
    // .linkColor(link => {
    //   let index = 0
    //   const colors = ['#faa']
    //   switch(link.type) {
    //     case 'export': break;
    //     case 'type': index = 1;break;
    //     case 'locate': index = 2;break;
    //     default: index = 3;break;
    //   }
    //   return this.nodeColors[index]
    // })
    // .linkOpacity(1)
      
      // Spread nodes a little wider
      this.Graph.d3Force('charge').strength(-150)
    }