舊版本的文章傳送門

relation-chart

人物關系圖生成器

效果預覽鏈接

可進行拖拽，縮放

demo.jpg

高亮選中的節點

高亮選中

install

npm:

npm install relation-chart --save

引用

ES6:

import RelationChart from 'relation-chart'

Script tag:

<script src="/node_modules/relation-charts/dist/index.js"></script>

API

new RelationChart(domElement, data[, config])

參數說明：

• domElement：容器dom元素
• data：人物關系圖的數據，格式見下文
• config：自定義配置，可省略，默認詳細配置見下文

數據格式

{
    // 節點列表
    nodes:[
        {
            "name": "路人甲",
            "avatar": "./img/140646844806.jpg"
        },
        {
            "name": "路人乙",
            "avatar": "./img/141611471224.jpg"
        },
        {
            "name": "路人丙",
            "avatar": "./img/140848800133.jpg"
        },
    ],
    // 線條列表
    links:[
        {
            "source": 0,            // 起始節點在 nodes[] 中的索引
            "target": 1,            // 目標節點在 nodes[] 中的索引
            "relation": "朋友",      // 關系名稱
            "color": "734646"       // 自定義細條顏色,#734646
        },
        {
            "source": 1,
            "target": 2,
            "relation": "女朋友",
            "color": "734646"
        },
    ],
}

config

默認配置

const defaultConfig = {
    width: 1000,                 // 總畫布svg的寬,單位為px,默認為容器的寬
    height: 800,                // 高，默認為容器的高
    isHighLight: true,        // 是否啟動 鼠標 hover 到節點上高亮與節點有關的節點，其他無關節點透明的功能
    isScale: true,              // 是否啟用縮放平移zoom功能
    scaleExtent: [0.5, 1.5],    // 縮放的比例尺
    chargeStrength: -300,        // 萬有引力
    collide: 100,                 // 碰撞力的大小 （節點之間的間距）
    nodeWidth: 160,             // 每個node節點所占的寬度，正方形
    margin: 20,                 // node節點距離父親div的margin
    alphaDecay: 0.0228,          // 控制力學模擬衰減率
    r: 45,                      // 頭像的半徑 [30 - 45]
    relFontSize: 12,           // 關系文字字體大小
    linkSrc: 30,                // 劃線時候的弧度
    linkColor: '#bad4ed',        // 鏈接線默認的顏色
    strokeColor: '#7ecef4',     // 頭像外圍包裹的顏色
    strokeWidth: 3,             // 頭像外圍包裹的寬度
}

自定義配置會覆蓋默認配置

example

html 有個承載 svg 圖的容器

<div id="map" style="width: 1000px;height: 800px">
</div>

import RelationChart from 'relation-chart'

// 容器
let element = document.querySelector('#map');

// 關系圖數據

let data = {
    nodes: [
        {
            "name": "路人甲",
            "avatar": "./img/140646844806.jpg"
        },
        {
            "name": "路人乙",
            "avatar": "./img/141611471224.jpg"
        },
        {
            "name": "路人丙",
            "avatar": "./img/140848800133.jpg"
        },
    ],
    links: [
        {
            "source": 0,
            "target": 1,
            "relation": "朋友",
            "color": "734646"
        },
        {
            "source": 1,
            "target": 2,
            "relation": "女朋友",
            "color": "734646"
        },
    ],
}
 
// 創建人物關系圖 svg
new RelationChart(element, data)

vue 中使用案例

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

<script>
import RelationChart from 'relation-chart'

export default {
  data () {
    return {}
  },
  mounted() {
    new RelationChart(this.$refs.map, data)
  },
}
</script>

歡迎 star ???