Neo4jForceMap

介绍

基于d3-force，将Neo4j数据可视化。

效果

特点

• 不同类型的节点有不同的颜色
• 节点和关系线均有选中样式
• 节点拖拽固定
• 两个节点之前的多关系
• 平移和缩放

使用文档

安装

npm install holy-relationship-map --save

使用

import HolyRelationshipMap from "holy-relationship-map "

const graph = new HolyRelationshipMap(".forceMap", options)

文档

options

| 参数 | 类型 | 描述 |默认值| | --------- | ---- | ----------- |------- | | nodeRadius | number | 节点的半径 |16| | arrowSize | number | 关系指向箭头的大小 |10| | nodeKey | string | 节点的key，关系中的source和target值对应节点数据中的哪个key的值 |id| | nodeTextKey | string | 节点的文本key |label| | nodeTextSize | number | 节点文本的字体大小 |14| | nodeTextColor | string | 节点文本的颜色 |#333| | linkKey | string | 关系的key |id| | linkTextKey | string | 关系文本key，同时默认为渲染文本 |type| | linkTextMap | string | 关系文本的映射表，即linkTextMap[linkTextKey]才是需要渲染的文本 |无| | linkTextSize | number | 关系文本字体大小 |12| | linkTextColor | string | 关系文本的颜色 |#333| | linkColor | string | 关系线的颜色 |#a5abb6| | linkHighlightColor | string | 关系高亮时文本key |#ff9300| | arrowSize | number | 关系指向箭头的大小 |10| | data | object | 图谱数据，拥有nodes数组和links数组，必填。 |无| | onNodeClick | function | 节点左键点击事件。 |无| | onNodeDBClick | function | 节点双击事件。 |无| | onNodeMouseenter | function | 节点鼠标移入事件。 |无| | onNodeMouseleave | function | 节点鼠标移出事件。 |无| | onLinkClick | function | 关系连线点击事件。 |无|

API | 方法 | 参数 | 描述 | | ----- | ----- | ---- | | updateGraph | object | 更新节点和关系 |

注意

• 不同类型的节点是通过node对象上的type:number决定的，现在仅支持最多六种颜色（即type的取值范围为[1,6]），后续会增加更多配色/类型。
• 关系的唯一标识符默认为id。

例子

<div class="forceMap"></div>

const data = {
    nodes: [
        {
            id: 1,
            properties: {},
            type: 1,
            label: "魏无羡"
        },
        {
            id: 2,
            properties: {},
            type: 1,
            label: "江澄"
        },
        ...
    ]，
    links:[
        {
            id: 1,
            source: 1,
            target: 2,
            type: "对不起我食言了",
            properties: {}
        },
        {
            id: 2,
            source: 2,
            target: 1,
            type: "我做你的家主",
            properties: {}
        },
        ...
    ]
}

const svg = new HolyNeo4j(".forceMap", {
    data,
    onNodeClick: d => {
        if (!isPanelShow) {
            isPanelShow = true;
        }
        property = { ...d.properties };
    },
    // onNodeDBClick: d => {
    //   getMoreData();
    // },
    onLinkClick: d => {
        if (!isPanelShow) {
           isPanelShow = true;
        }
        property = { ...d.properties };
    }
});

TODO

• [x] 动态更新节点和关系
• [x] 关系标识文字保持从左到右
• [ ] 节点支持图片
• [ ] 自定义节点不同类型的颜色
• [ ] 节点操作工具栏