# relationship-chart

> RelationshipChart

Latest version **1.0.1** (published 2019-11-17) · ISC license · 0 weekly downloads

## Install

```sh
npm install relationship-chart
pnpm add relationship-chart
yarn add relationship-chart
bun add relationship-chart
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2019-11-17 |
| First published | 2019-11-17 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 113.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | zhangmin |
| Maintainers | zm1098 |
| Keywords | 关系图谱 |

## Links

- npm: https://www.npmjs.com/package/relationship-chart
- npm.io page: https://npm.io/package/relationship-chart

## Dependencies (1)

- [d3](https://npm.io/package/d3.md) ^5.9.1

## Recent versions

- 1.0.1 (latest) — 2019-11-17
- 1.0.0 — 2019-11-17

## README

# [relation-chart](https://github.com/xiedajian/relation-chart)

关系图谱生成工具

# 安装

npm:

```
npm install relationship-chart --save
```

# 引入

ES6:

```javascript
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
默认配置

```javascript
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

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

```html
<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>
```

---
_Source: https://npm.io/package/relationship-chart · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._