自己做网站用什么软件下载,密云城市建设官方网站,西安企业排行榜,无锡网站建设wuxi8878文章目录 hover时候#xff0c;当前节点高亮#xff0c;且直接相连的线和节点也高亮展示#xff08;展示直接关系#xff09;节点的label超过10个字的时候#xff0c;文本溢出#xff0c;且hover有tooltip#xff1b;小于10个字#xff0c;没有tooltiptootip使用插件mo… 文章目录 hover时候当前节点高亮且直接相连的线和节点也高亮展示展示直接关系节点的label超过10个字的时候文本溢出且hover有tooltip小于10个字没有tooltiptootip使用插件modes里面添加tooltip fitViewfitCenter: true, // 居中设置最大和最小的缩放比节点宽自适应自定义line的时候没有圆角自己设置 项目背景
https://www.yuque.com/kaishuimeiyouchuntian/oe1nen/og8aawmq96a9mc11 hover时候当前节点高亮且直接相连的线和节点也高亮展示展示直接关系
内置的高亮节点插件activate-relations
节点的label超过10个字的时候文本溢出且hover有tooltip小于10个字没有tooltip
tooltip的shouldBegin设置是否显示tooltip
tootip
const tooltip new G6.Tooltip({getContent(e){console.log(插件方式添加tooltip-e:,e)if(e.item.getType() node){// 获取节点信息console.log(获取 model,e.item.getModel())}else {console.log(source和target,e.item.getSource(), e.item.getTarget())console.log(source的model,e.item.getSource()) // 获取source节点Node内容为{_cfg:{model:{节点基本信息}}}console.log(source的name,e.item.getSource().getModel()) // 获取到source节点Node后然后获取节点基本信息label、id、type等等}let label e.item._cfg.model.labelAllText||if(label.lengthGRAPH_NODE_LABEL_LENGTH){// 在这做判断限制没用需要在shouldBegin里面设置。}return e.item._cfg.model.labelAllText||},itemTypes: [node,edge,],/*** 字符长度大于10的时候显示tooltip否则不显示tooltip*/shouldBegin: (e) {const target e.target;console.log(e);// console.log(e.target);// console.log(target.get(name))let label e.item._cfg.model.labelAllText||if(label.lengthGRAPH_NODE_LABEL_LENGTH){return true}return false}
})使用插件
const tooltip new G6.Tooltip({})// tooltip类名为g6-component-tooltipmodes里面添加tooltip
modes: {default: [drag-canvas,zoom-canvas,drag-node, // TODO-mockactivate-relations,// click-select,{type: tooltip,formatText (model) {if(model.labelAllText.lengthGRAPH_NODE_LABEL_LENGTH){return model.labelAllText}return null},offset: 30,// 也可以是 shouldBeginshouldBegin:(e){return false // 不渲染tooltip 返回true或者false}},],
},// tooltip类名为 g6-tooltip g6-node-tooltipfitView
fitView: true,
fitViewPadding: [ 55,10,10,10],fitViewPadding生效依赖于fitView
fitCenter: true, // 居中
fitCenter是graph居中那么根节点不在中间所以用focusItem。根节点rootId居中但是上面会很空所以居中上位置。用 this.graph.translate(0, -(heightNum / 2 - 60))
if (this.rootId) {setTimeout(() {this.showGraph truethis.graph.focusItem(this.rootId, false)let dom document.getElementById(deviceTopoGraph)try {let height window.getComputedStyle(dom).heightlet heightNum height.replace(px, )// console.log(高度值,heightNum)// console.log(dom元素, window.getComputedStyle(dom))// console.log(dom元素, window.getComputedStyle(dom).height)// console.log(dom元素, document.getElementById(deviceTopoGraph).style)// console.log(dom元素, document.getElementById(deviceTopoGraph).style.height)this.graph.translate(0, -(heightNum / 2 - 60))} catch (err) {}}, 100)
} else {this.showGraph true
}设置最大和最小的缩放比
太小了图都看不清楚所以没必要缩的太小
this.graph.setMinZoom(0.1)console.log(最小缩放比例, this.graph.getMinZoom())
console.log(最小缩放比例, this.graph.getMaxZoom())节点宽自适应
v.size [this.$common.getStrWidth(v.label), 30] // rectexport const getStrWidth (str) {let len 0for (let i 0; i str.length; i) {if (str.charCodeAt(i) 255) {len 2// len 12} else {len 0.8// len7}}let strWidth Math.ceil(len) * 6 40// let strWidth Math.ceil(len) 40// 也可以处理成有一个最小宽度的。strWidth strWidth 60 ? 60 : strWidth // circlereturn strWidth}自定义line的时候没有圆角自己设置
https://blog.csdn.net/weixin_42995876/article/details/134929261
const LINE_VERTICES 50
G6.registerEdge(custom-line-2, {draw (cfg, group) {const startPoint cfg.startPointconst endPoint cfg.endPoint/*** 根据计算判断拐点偏移量是正还是负* type {number}*/let offsetX 0let offsetY 6let sweepFlag 1 // 值只有1和02的时候就属于是直线不需要这个弧线的传参数...if (startPoint.x endPoint.x) {offsetX 6sweepFlag 0} else if (startPoint.x endPoint.x) {offsetX -6sweepFlag 1} else {// 如果start和end是垂直的那么不需要圆弧角了。sweepFlag 2}let path []// 可以直接判断插入参数暂时先这样不调整了。if (sweepFlag 2) {path [[M, startPoint.x, startPoint.y], // 起点[L, startPoint.x, LINE_VERTICES startPoint.y], // 固定值处拐点第一个拐点[L, endPoint.x offsetX, LINE_VERTICES startPoint.y], // 固定值处拐点// [A,12, 12, 0 ,0, sweepFlag, endPoint.x ,LINE_VERTICES startPoint.yoffsetY], // 不需要圆弧[L, endPoint.x, LINE_VERTICES startPoint.y offsetY], // 固定值处拐点[L, endPoint.x, endPoint.y], // 终点]} else {path [[M, startPoint.x, startPoint.y], // 起点[L, startPoint.x, LINE_VERTICES startPoint.y], // 固定值处拐点第一个拐点[L, endPoint.x offsetX, LINE_VERTICES startPoint.y], // 固定值处拐点[A, 6, 6, 0, 0, sweepFlag, endPoint.x, LINE_VERTICES startPoint.y offsetY], // 圆弧角[L, endPoint.x, LINE_VERTICES startPoint.y offsetY], // 固定值处拐点[L, endPoint.x, endPoint.y], // 终点]}const shape group.addShape(path, {attrs: {stroke: #C8C9CC,path: path,radius: 9,},// 在 G6 3.3 及之后的版本中必须指定 name可以是任意字符串但需要在同一个自定义元素类型中保持唯一性name: path-shape,})return shape},
})
