seeksdream / relation-graph Goto Github PK

relation-graph is a relationship graph display component that supports Vue2, Vue3, React. Allowing you to fully customize the graphical elements using HTML/CSS and Vue or React components through slots. 支持Vue和React的关联关系图谱组件，可以展示如组织机构图谱、股权架构图谱、集团关系图谱等知识图谱，可提供多种图谱布局，包括树状布局、中心布局、力学布局自动布局等。

Home Page: https://relation-graph.com

License: MIT License

JavaScript 0.26% Vue 23.27% HTML 0.31% TypeScript 72.69% SCSS 3.31% Shell 0.14% CSS 0.01%

graph relationship-graph vue vue3 react

relation-graph's People

Contributors

Stargazers

Watchers

Forkers

zhangshuo1991 willyanyan lkpbooder sangtian152 yuanlijianvip aliez-feng tqjg stevenkang215 liangrumeng2015 xiongbiao119 code-liwenqing pigpeak jfong-zhong hzswh557 starwink xiaolingis nonefirst julien-joe gail9527 qwe520911 gogogo365 gongyongzhuanghu majun445566 frozenmrj jtaojs gdzy1987 upholdjx f221981 ybt96 xmgh1024 alan-yuan iuin yeqiuxiang liuz-ak47 stockserv muyongfei liyandan 1335951413 yujuanouyan gfwdhh michae1s3 huiliaoning nemelesscode daizenergy lucky-forrest miazzy sunjiajing yunwisdom j12138 lwz-vision bilegole alexxigang yangdy-buji panlong10 wss96 yanxuejun2018 buyaopa bestjex evansye2 xiweicheng laninblue zhongzhiqiang2018 looksgood wangdazhe miqifirefly teamsssssss xiashuijun yaoguoliang92 leetia316 gsx2021 github2me2 qinman hopebing northlandteam winn-coding never13zt ttany zyifan zhangshaopeng1 rebider zjj234324234 gxshmm yitao11410 zengyimin baiqzh baigaoling xuhongyang3601 hdm123456 minjchen yanzefeng shao-qy kumiko77 ifoenix jorkun jieke00718 xiaoke1989 chunbaise smj-mn naruto0623 wuyishch

relation-graph's Issues

提供图形化操作界面

建议开发图形化操作界面，拖动创建节点和连线，自动生成数据。
类似百度脑图，非常感谢！！！

如何改变关系图的背景

我们做的系统背景是蓝色的，这个图放上去只能是白色背景。。。

右边的菜单栏【全部，放大，缩小，下载】如何隐藏

这个菜单栏如何隐藏呀

样式里加上

Originally posted by @Endless520 in #37 (comment)

node里设置html后，设置的节点宽高不生效

请问支持vue3吗

完善一下文档呗，还有个isShow

not supported for VUE3?

使用vue3 按照文档导入了组件，页面就变空白了，报错：Uncaught (in promise) TypeError: selfHook.bind is not a function

请问是不支持vue3吗

npm install --save relation-graph

报错信息：
npm WARN saveError ENOENT: no such file or directory, open '/data/package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open '/data/package.json'

节点间有多条线时怎么判断点击的是哪一条

树图如何初始自适应居中且自动调整Zoom使画布包含所有节点？

使用时遇到一些问题想请教，如下：
1.如何设置根节点初始化是自动居中？
2.如何初始化时自适应zoom使画布包含所有节点？
3.子节点展开或收起点击时，为了使节点布局正常，使用refresh()总是会重置画布，有没有优化方案，使点击子节点时节点重绘但不改变当前位置？

节点里面的text文字不显示

使用官方配置的demo也是这种情况，节点里面的文字不显示，
使用：
https://github.com/seeksdream/relation-graph/blob/master/doc/demo/Demo4TreeData.vue
的demo也是，图形其他都正常显示。就是node里面的文字是空的。
版本"relation-graph": "^1.1.0",

会是哪些情况啊？

能谈一下商务合作吗？

当只有根节点时，根节点快速闪现

当我收起根节点时，根节点的位置一直在闪烁不定，
const childNodes = this.currentNode.lot.childs || [] if (childNodes && childNodes.length) { childNodes.forEach(item => { item.isHide = true // 隐藏该节点的子节点，前提是该节点不需要从服务器获取子节点 // this.$refs.seeksRelationGraph.removeNodeById(item.id) }) }
收起自己写的，就是隐藏子节点

怎么默认只展开第一层

数据量大的时候很卡

数据量大的时候，如何能手动销毁

关系线怎么才可以接收到hover事件，显示信息

我想实现一个鼠标hover在关系线上弹出个提示信息框的功能，这个怎么才能实现？

建议多加几个事件，就靠现在这四个事件，自由度太低了，可以多加几个事件啊

1、节点开始拖动事件，可以进行阻止拖动
2、节点拖动实时触发
3、节点拖动结束

请问支持vue3吗

怎么从头开始使用你的项目，程序怎么运行

双向树

双向树中，设置线 isReverse: false 或 true 对箭头无影响

建议适配移动端，touchmove和双指放大缩小。

开发建议

因为看到目前已经可以实现了拖拽的效果，但是还不能更改子节点与父节点、子节点与子节点的关系，无法改变to、from的对象
另外，无法在配置里设置渲染结构的百分比，比如我想一打开就是70%大小展示（虽然可以缩放，但是有的时候图太大，一上来显示完整的要好一些）

节点多的时候，线条会乱

node节点宽度设置，导致节点互相覆盖，没有间隔，间隔不是自动有的吗

功能建议

1、支持移动端
2、添加栅格布局

文档缺少 zoom() 方法

在源码里能找到 zoom 方法，也能调用，文档里却没有写 graph 对象下有 zoom 方法

工具栏的全屏后，右键菜单和节点悬浮框层级有问题，都看不见

案例中就有这个问题

firefox 火狐浏览器显示有问题

火狐浏览器 root节点显示有问题

多个子图时显示异常

在使用这个组件创建图谱时，当一张图中有两个互不连通的子图时，只有包含root节点的子图能够正常显示，其他的结点会全部重叠在左上角，如 1 to 2，3 to4 时，节点3和节点4会重叠，请问是否能通过设置多个Root节点，使用每一个root节点对应一个非联通子图的方式来解决？

图加载之后links丢失from和to字段

this.$refs.seeksRelationGraph.setJsonData(graph, (seeksRGGraph) => {
// 这些写上当图谱初始化完成后需要执行的代码
});
执行上述代码之后打印图的数据
console.log(this.$refs.seeksRelationGraph.getGraphJsonData());

结果links丢失from和to字段