Skip to content

vue+d3v6实现动态知识图谱可视化展示(包含2D和3D图谱展示)

License

Notifications You must be signed in to change notification settings

mullore/vue-d3-graph

 
 

Repository files navigation

vue-d3-graph

基于之前的代码进行修改:neo4j-d3-graph

具体功能及效果可以参考本人博客:vue+d3v6实现动态知识图谱可视化展示

本人代码已被盗用,屑屑各位的肯定和认可,如果觉得项目有帮助,可以点个star,有空会对代码作进一步完善!

一、代码使用说明

1. 依赖安装

# 二选一
npm i
# yarn需要全局安装一下
yarn install

推荐使用 cnpm 来安装,速度更快:

# 二选一
npm install -g cnpm --registry=https://registry.npm.taobao.org
npm install cnpm -g --registry=https://registry.nlark.com
cnpm i

2. 项目启动

# 二选一
npm run serve
yarn serve

3. 项目打包

# 二选一
npm run build
yarn build

4. 使用lint检查并修复文件

# 二选一
npm run lint
yarn lint

Customize configuration

See Configuration Reference.

二、代码功能清单

  • d3初始化
    • 数据解析
    • 数据渲染
  • 图查询更新视图
  • 平移与缩放
  • 文字显示
  • 节点拖拽
  • 鼠标浮动事件
  • 鼠标单击事件
  • 鼠标右键菜单(写一个d3插件)
  • 图例交互事件
  • 文字搜索
  • 模式选择
  • 关系文字和箭头的绘制与调整
  • 节点编辑功能
  • 3D图谱展示

三、代码修改说明

1. 代码结构

  • 组件存放在 components 文件夹
    • d3graph.vue —— 2D图谱展示组件
    • threeGraph.vue —— 3D图谱展示组件
    • gSearch.vue —— 搜索组件,目前主要通过require代替后台请求
  • 页面存放在 views 文件夹
    • 2dView.vue —— 2D图谱展示页面
    • 3dView.vue —— 3D图谱展示页面
  • d3插件存放在 plugins 文件夹
    • d3-context-menu.js —— 右键菜单事件注册及回调函数
    • d3-context-menu.scss —— 右键菜单样式文件
  • 路由存放在 router 文件夹
    • index.js —— 路由较少,就2个页面
  • 静态图数据存放在 data 文件夹
  • storeassets 文件夹暂时不用

2. 页面结构

页面通过组件分为不同功能模块:

  1. 2dView.vue2D图谱展示页面
  • d3graph.vue
    • 2D图谱展示组件
  • gSearch.vue - 搜索组件 - 目前模拟后台请求,通过require代替
  1. 3dView.vue3D图谱展示页面
  • threeGraph.vue
    • 3D图谱展示组件
  • gSearch.vue - 搜索组件 - 目前模拟后台请求,通过require代替

3. 在组件中修改代码,替换成自己构建的图谱

  • 图数据JSON格式要求

    在Neo4j图数据中,以 p 为键值对表示,每个 p 为一个查询关系。

    按如下Cypher查询语句导出均可以展示:

    MATCH p=(n:节点类型)-[r:关系类型]->() RETURN p limit 20
    
  • gSearch.vue

模拟后台查询,分别在data和methods属性中修改静态图数据文件的路径

data () {
  return {
    input: '',
    mode: '1',
    // 模拟后台请求到的json数据
    data: require('../data/records.json'),
    results: []
  }
}
methods: {
  query () {
    // 模拟后台查询时,图数据动态更新的情况(用静态文件暂时代替)
    // console.log(typeof this.mode)
    if (this.data.length <= 20) {
      this.data = require('../data/top5.json')
    } else {
      this.data = require('../data/records.json')
    }
    this.$emit('getData', this.data)
  },
  // 省略其他函数...
}
  • d3graph.vue

    在data属性中修改映射,用于把标签名称转换为对应的中文名称

    // 定义节点属性名称及对应显示的中文名称
    nodeObjMap: {
      'address': '注册地址',
      'captial': '注册资本',
      'credit_code': '信用代码',
      'name': '节点名称',
      'setup_time': '注册日期'
    }

    map

  • 2dView.vue

    在data属性中修改图例名称、节点标签、关系标签(标签保证和Neo4j图数据中对应)

    data () {
      return {
        // d3jsonParser()处理 json 后返回的结果
        data: {
          nodes: [],
          links: []
        },
        names: ['企业', '贸易类型', '地区', '国家'],
        // 节点和关系标签名称与图数据库保持一致
        labels: ['Enterprise', 'Type', 'Region', 'Country'],
        linkTypes: ['', 'type', 'locate', 'export']
      }
    }
  • 3dView.vue

    同上

四、代码效果展示

分为2D、3D图谱展示两个页面:

  1. 2D图谱展示

    2d

  2. 3D图谱展示

    3d

四、关于新版d3与老版本的差异

1. d3.event被移除

  • 老版本(v4)

    // 事件绑定部分
    d3dom.append('g')
        .attr("class", "texts")
        .selectAll("text")
        .data(nodes)
        .enter()
    	// 省略处理部分,以下是拖拽事件的绑定
        .call(d3.drag()
            .on("start", dragstarted)
            .on("drag", dragged)
            .on("end", dragended)
        )
    // 以drag代码为例,在v6中使用会报错
    // 开始拖动并更新相应的点
    function dragstarted(d) {
        if (!d3.event.active) simulation.alphaTarget(0.3).restart();
        d.fx = d.x;
        d.fy = d.y;
    }
    // 拖动进行中
    function dragged(d) {
        d.fx = d3.event.x;
        d.fy = d3.event.y;
    }
    // 拖动结束
    function dragended(d) {
        if (!d3.event.active) simulation.alphaTarget(0);
        d.fx = null;
        d.fy = null;
    }

    报错:export 'event' (imported as 'd3') was not found in 'd3'

  • 新版本(v6)

    function started(event) {
      var circle = d3.select(this).classed("dragging", true);
    
      event.on("drag", dragged).on("end", ended);
    
      function dragged(event, d) {
        circle.raise().attr("cx", d.x = event.x).attr("cy", d.y = event.y);
      }
    
      function ended() {
        circle.classed("dragging", false);
      }
    }

2. vue组件css不生效

原因:添加了scoped,其通过d3动态添加的节点css样式不生效

About

vue+d3v6实现动态知识图谱可视化展示(包含2D和3D图谱展示)

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Vue 96.2%
  • JavaScript 2.2%
  • Other 1.6%