在antv G6的时候使用自定义节点的时候 出现的边长度不相等的问题
如图 如果我改成自定义节点的时候就有问题 graph.node 下面的方法的时候 如果取消的话就是左右两边的边的长度是相等的 我要怎么设置这个 左边的边的长度呀 我用getHGap 来调横间距 结果只能调整右边的 左边的调整不了
<template>
<div class="company-list-container">
<div id="g6Box"></div>
</div>
</template>
<script>
import G6 from '@antv/g6'
export default {
name: 'G6Node1',
data () {
return {
data: {
id: '1',
label: '老大（最外层）',
children: [
{
id: '1-1',
label: '第二层1'
},
{
id: '1-2',
label: '第二层2'
},
{
id: '1-3',
label: '第二层3'
},
{
id: '1-4',
label: '第二层4'
},
{
id: '1-5',
label: '第二层5'
// children: [
// {
// id: '1-5-1',
// label: '第三层1',
// children: [
// {
// id: '1-5-1-1',
// label: '第四层1'
// },
// {
// id: '1-5-1-2',
// label: '第四层2'
// },
// {
// id: '1-5-1-3',
// label: '第四层3'
// }
// ]
// },
// {
// id: '1-5-2',
// label: '第三层2',
// children: [
// {
// id: '1-5-2-1',
// label: '第四层4'
// },
// {
// id: '1-5-2-2',
// label: '第四层5'
// }
// ]
// },
// {
// id: '1-5-3',
// label: '第三层3',
// children: [
// {
// id: '1-5-3-1',
// label: '第四层6'
// },
// {
// id: '1-5-3-2',
// label: '第四层7'
// },
// {
// id: '1-5-3-3',
// label: '第四层8'
// },
// {
// id: '1-5-3-4',
// label: '第四层9'
// },
// {
// id: '1-5-3-5',
// label: '第四层10'
// }
// ]
// },
// {
// id: '1-5-4',
// label: '第三层4',
// children: [
// {
// id: '1-5-4-1',
// label: '第四层11'
// },
// {
// id: '1-5-4-2',
// label: '第四层12'
// },
// {
// id: '1-5-4-3',
// label: '第四层13'
// },
// {
// id: '1-5-4-4',
// label: '第四层14'
// }
// ]
// }
// ]
},
{
id: '1-6',
label: '第二层6'
}
]
}
}
},
mounted () {
this.initTree(this.data)
},
methods: {
initTree (data) {
// 画布宽高
console.log(document.getElementById('g6Box'), width, height)
const width = document.getElementById('g6Box').scrollWidth || 800
const height = document.getElementById('g6Box').scrollHeight || 800
const graph = new G6.TreeGraph({
// 图的 DOM 容器，可以传入该 DOM 的 id 或者直接传入容器的 HTML 节点对象。
container: 'g6Box',
renderer: 'svg',
// 指定画布宽度，单位为 'px'。
width,
// 指定画布高度，单位为 'px'。
height,
// 是否开启画布自适应。开启后图自动适配画布大小。
fitView: true,
// v3.5.1 后支持。开启后，图将会被平移，图的中心将对齐到画布中心，但不缩放。优先级低于 fitView
// fitCenter: true,
// 最小缩放比例
// minZoom: 1.5,
// 最大缩放比例
maxZoom: 1.5,
// 指定边是否连入节点的中心
linkCenter: false,
// 设置画布的模式
modes: {
default: [
{
// 只适用于树图，展开或收起子树
type: 'collapse-expand',
// trigger：收起和展开节点分组的方式。支持 'click' 和 'dblclick' 两种方式。默认为 'dblclick'，即双击。
trigger: 'click',
// onChange：收起或展开的回调函数。警告：V3.1.2 版本中将移除；
onChange: function onChange (item, collapsed) {
const data = item.get('model').data
data.collapsed = collapsed
return true
}
},
// 拖拽画布；
'drag-canvas',
// 缩放画布；
'zoom-canvas'
]
},
// 默认状态下节点的配置，比如 type, size, color。会被写入的 data 覆盖。
defaultNode: {
type: 'domNode',
// size 是单个数字，表示直径
// size: 16,
// 指定边连入节点的连接点的位置（相对于该节点而言），可以为空。例如: [0, 0]，代表节点左上角的锚点，[1, 1],代表节点右下角的锚点
// anchorPoints: [
// [1,0.5],
// [0,0.5],
// [0, 0.5]
// ],
anchorPoints: [
[0, 0.5],
[1, 0.5]
],
// 节点样式
style: {
// 节点填充色
fill: '#edeff1',
// 节点的描边颜色，''就是没颜色的意思
stroke: '#c5c6c6',
cursor: 'pointer'
},
// Object 类型。配置标签文本
labelCfg: {
// 标签的样式属性。
style: {
// 文本颜色
fill: '#acacb0',
// 文本字体大小
fontSize: 14
}
}
},
// 默认状态下边的配置，比如 type, size, color。会被写入的 data 覆盖。
defaultEdge: {
// 指定边的类型，可以是内置边的类型名称，也可以是自定义边的名称。默认为 'line'
type: 'cubic-horizontal',
// 边的样式属性
style: {
// 边的颜色
stroke: '#A3B1BF',
lineWidth: 1
},
// label: '边',
labelCfg: {
// 文本相对于边的位置，目前支持的位置有：'start'，'middle'，'end'。默认为'middle'。
position: 'end',
// 标签文字是否跟随边旋转
autoRotate: true,
style: {
// 文本颜色
fill: '#f00'
}
},
},
// 布局配置项，使用 type 字段指定使用的布局方式
layout: {
// 布局名称
type: 'mindmap',
// layout 的方向。
direction: 'H', // H / V / LR / RL / TB / BT
// 下面的参数都是一个节点，当存在某些奇葩点节点的时候，可以通过以下控制
// 节点 id 的回调函数
getId: function getId (d) {
return d.id
},
// 节点高度的回调函数
getHeight: function getHeight (d) {
return 16
},
// 节点宽度的回调函数
getWidth: function getWidth (d) {
return 16
},
// 节点纵向间距的回调函数
getVGap: function getVGap () {
return 40
},
// 节点横向间距的回调函数
getHGap: function getHGap (d) {
if (d.id == '1') {
return 120
}
return 120
}
},
// 动画
animate: true
})
// 设置各个节点样式及其他配置，以及在各个状态下节点的 KeyShape 的样式
// 该方法必须在 render 之前调用，否则不起作用
// 使用 graph.node(nodeFn) 配置 > 数据中动态配置 > 实例化图时全局配置
graph.node(function (node) {
if (node.id === '1') {
return {
labelCfg: {
style: {
fill: '#000',
fontSize: 12
// opacity: 0,
},
position: 'bottom',
offset: 10
},
// label: '123',
type: 'diamond',
size: [50, 50],
style: {
fill: '#fd9b30',
border: '10px solid red',
stroke: '#fec88d',
lineWidth: 5
}
}
}
return true
// return {
// // label: node.label,
// // size: [200, 40],
// // labelCfg: {
// // // position: node.children && node.children.length > 0 ? 'top' : 'bottom',
// // // offset: 5,
// // style: {
// // textAlign: 'center'
// // }
// // }
// }
})
G6.registerNode('domNode', {
draw (cfg, group) {
// if (cfg.id == '1') {
// const keyShape = group.addShape('dom', {
// attrs: {
// width: 50,
// height: 50,
// html: `
// // ">
// `
// }
// })
// }
console.log(cfg)
const keyShape = group.addShape('dom', {
attrs: {
width: 200,
height: 70,
html: `
${cfg.label}
1
`
},
name: 'dom-shape',
draggable: true
})
return keyShape
}
})
// domNode
// 初始化的图数据
graph.data(data)
// 根据提供的数据渲染视图。
graph.render()
// 让画布内容适应视口
graph.fitView()
}
}
}
</script>
<style lang="less" scoped>
.company-list-container {
width: 100%;
background-color: #fff;
}
</style>
