relationship-chart v1.0.1

relation-chart

关系图谱生成工具

安装

npm:

npm install relationship-chart --save

引入

ES6:

import RelationshipChart from 'relationship-chart'

API 调用

new RelationshipChart(ele, data[, config])

参数说明：

• ele: 一个容器 dom 元素
• data: 关系图谱数据
• config: 自定义配置，可省略

数据格式

-data
{
    // 节点数组
    nodes:[
        {
            "name": "小明",                           // 姓名
            "id": 1001,                               // id
            "imgUrl": require('@/assets/img/a.png'),  // 人物照片，格式可以有多种
            "header": ""                              // 人物称谓
        },
        {
            "name": "小芳",
            "id": 1002,
            "imgUrl": "http://.../b.png",
            "header": "妻子"
        },
        {
            "name": "小丁",
            "id": 1003,
            "imgUrl": "./c.png",
            "header": "朋友"
        },
        ...
    ],
    // 连线数组
    links:[
        {
            "source": 0,            // 源节点在nodes中的index
            "target": 1,            // 目标节点在nodes中的index
            "relation": "同行6次",   // 连线上的关系名称
            "color": "pink"         // 自定义连线的颜色,pink
        },
        {
            "source": 1,
            "target": 2,
            "relation": "同网吧3次",
            "color": "#000"
        },
        ...
    ],
}

-config 默认配置

const defaultConfig = {
  width: 1000, // 总画布svg的宽
  height: 800, // 高
  nodes: [], // 节点数组
  links: [], // 线数组
  r: 30, // 头像的半径
  linkLineColor: '#bad4ed', // 关系连接线的颜色
  linkBgColor: '#e1e4e8', // 关系文字背景矩形的颜色
  linkTextFontSize: 12, // 关系文字的大小
  linkTextColor: '#333', // 关系文字的颜色
  headerFontSize: 12, // header文字大小
  headerColor: '#fff', // header文字颜色
  nameFontSize: 16, // 姓名文字大小
  nameColor: '#24292e', // 姓名文字颜色
  linkSrc: 30, // 划线时候的弧度
  imgBorderColor: '#1c7ce8', // 头像边框颜色
  imgBorderWidth: 3, // 头像边框宽度
  _clickNode: function() {}, // 节点点击事件
  _clickLink: function() {} // 连线点击事件
}

自定义配置会合并到默认配置中，并覆盖默认配置

example for vue

<template>
  <div class="wrapper">
    <div
      id="mychart"
      class="map"
      ref="mychart"
      style="width: 1000px;height: 1000px;"
    ></div>
  </div>
</template>

<script>
  import RelationshipChart from 'relationship-chart'

  export default {
    data() {
      return {}
    },
    mounted() {
      // 数据
      let data = {
        nodes: [
          {
            name: '姓名1',
            id: 41,
            group: 1,
            imgUrl: './img/a.jpg'
          },
          {
            name: '姓名2',
            id: 42,
            group: 1,
            imgUrl: './img/b.jpg',
            header: '二叔'
          },
          {
            name: '姓名3',
            id: 44,
            group: 1,
            imgUrl: './img/c.jpg',
            header: '丈夫'
          }
        ],
        links: [
          {
            source: 0,
            target: 1,
            relation: '关系1',
            color: ''
          },
          {
            source: 0,
            target: 2,
            relation: '关系2',
            color: ''
          }
        ]
      }

      // 自定义配置
      let configs = {
        nameColor: 'red',
        _clickNode: function(d) {
          // todo something
        },
        _clickLink: function(d) {
          // todo something
        }
      }

      // 容器
      let wrap = document.getElementById('mychart')

      // 创建人物关系图 svg
      new RelationshipChart(wrap, data, config)
    }
  }
</script>