pixi-relationship

使用 pixijs 实现关系图谱效果: Demo

Use

npm install pixi-relationship --save

import PixiRelationship from 'pixi-relationship'
import data from '../test.json'

const app = new PixiRelationship({
  containerID: "container",
  backgroundColor: 0xceefff,
  placeholderImg: require("../images/test.jpg"),
  onClick: data => {
    console.log("onClick:", data);
    alert(JSON.stringify(data))
  },
  data: {
    links: data.links,
    nodes: data.nodes,
    linksColors: [0x71b7ff, 0x509838, 0xfd8888, 0xfff36a]
  },
});

app.init();
// app.destroy();

API

初始化参数说明

| 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | | containerID | 容器ID | string | "pixi-relationship" | | | applicationOptions | PIXI.Application初始化参数 | PIXI.Application options | | | | backgroundRoundColor | 背景色值 | 0x... number | 0xceefff | | | | nameStyle | 名称的样式 | (options) => PIXI.TextStyle | ... | | | borderColor | 边框色值 | 0x... number | 0x000000 | | borderColorHover | 边框Hover色值 | 0x... number | 0x598dff | | | linksColors | 连线色值对象(对应data中的type) | Array<...> | Object | [0x71b7ff, 0x509838, 0xfd8888, 0xfff36a] | | linksTypeLabel | 连线色值对象说明 | Array<...> | Object | ['爱情', '亲情', '友情'] | | | placeholderImg | 默认占位图 | string | | | onClick | 点击card事件 | | | | | data | 数据源 | | | |

注意事项：

data 数据源格式要求

{
  "links": [
    {
      "from": "2636106",
      "name": "丈夫",
      "to": "432415",
      "type": 0
    },
    {
      "from": "432415",
      "name": "妻子",
      "to": "2636106",
      "type": 0
    }
    // 注意关系都是单向的，所以2个nodes之间的关系应该有2个links
    ...
  ],
  "nodes": [
    {
      "id": "2636106",
      "img": "http://...",
      "level": 0, // 0 表示第一层， 1 表示第二层， 2表示第三层
      "name": "陈希"
    }
    ...
  ]
}

linksColors 对象需要对应 data 中的 links type，如：

linksColors = [0x71b7ff, 0x509838, 0xfd8888, 0xfff36a];
data = {
  links: [
    {
      from: "2636106",
      name: "test",
      to: "432415",
      type: 0 // 此type值，连线颜色使用 linksColors[0] 
    }
  ],
  ...
}

or 

linksColors = {
  t1: 0x71b7ff, 
  t2: 0x509838
};
data = {
  links: [
    {
      from: "2636106",
      name: "test",
      to: "432415",
      type: "t1" // 此type值，连线颜色使用 linksColors["t1"] 
    }
  ],
  ...
}

linksTypeLabel 同上，若不传，则不显示 label。

方法

继承于 PIXI.Application 对象。

app.init() // 初始化

app.destroy() // 销毁

app.resizeViewport() // 重置viewport

License

ISC