(G6)图谱总结

(G6)图谱相关总结

• G6画布放大缩小

<i class="fa fa-compress" v-if="isFullscreen" @click="small"></i>
<i class="fa fa-expand" v-else @click="big"></i>
<div id="result-graph"></div>

big() {
      this.isFullscreen = true;
      this.$nextTick(() => {
        let dom = document.querySelector("#result-graph");
        this.graph.changeSize(dom.clientWidth, dom.clientWidth);
      });
    },
    small() {
      this.isFullscreen = false;
      this.$nextTick(() => {
        let dom = document.getElementById("result-graph");
        this.graph.changeSize(dom.clientWidth, 350);
      });
    },

• G6超长文本省略

superLongTextHandle(str, maxWidth, fontSize) {
  const ellipsis = "...";
  const ellipsisLength = G6.Util.getTextSize(ellipsis, fontSize)[0];
  let currentWidth = 0;
  let res = str;
  // 区分汉字和字母
  const pattern = new RegExp("[\u4E00-\u9FA5]+");
  str.split("").forEach((letter, i) => {
    if (currentWidth > maxWidth - ellipsisLength) return;
    if (pattern.test(letter)) {
      // 中文字符
      currentWidth += fontSize;
    } else {
      // 根据字体大小获取单个字母的宽度
      currentWidth += G6.Util.getLetterWidth(letter, fontSize);
    }
    if (currentWidth > maxWidth - ellipsisLength) {
      res = `${str.substr(0, i)}${ellipsis}`;
    }
  });
  return res;
},

• 丝滑粘黏

// 丝滑粘黏
 events() {
   function refreshDragedNodePosition(e) {
     const model = e.item.get("model");
     model.fx = e.x;
     model.fy = e.y;
   }
   this.graph.on("node:dragstart", (e) => {
     this.graph.layout();
     refreshDragedNodePosition(e);
   });
   this.graph.on("node:drag", (e) => {
     this.graph.layout();
     refreshDragedNodePosition(e);
   });
 },

使用方式：渲染后直接引入

// 3.配置数据源，渲染
this.graph.data(this.visualData);
this.graph.render(); // 渲染图
this.graph.refresh();
this.events();

• G6换行符处理超长文本

//G6换行符处理超长文本
superLongTextHandle(str, maxWidth, fontSize) {
  let currentWidth = 0;
  let res = str;
  // 区分汉字和字母
  const pattern = new RegExp("[\u4E00-\u9FA5]+");
  str.split("").forEach((letter, i) => {
    if (currentWidth > maxWidth) return;
    if (pattern.test(letter)) {
      // 中文字符
      currentWidth += fontSize;
    } else {
      // 根据字体大小获取单个字母的宽度
      currentWidth += G6.Util.getLetterWidth(letter, fontSize);
    }
    if (currentWidth > maxWidth) {
      res = `${str.substr(0, i)}\n${this.superLongTextHandle(
        str.substr(i),
        maxWidth,
        fontSize
      )}`;
    }
  });
  return res;
},

使用方式：处理数据的时候

// 1.图数据
this.visualData = { nodes: [], edges: [] };
//点
this.nodeData.forEach((item) => {
  let obj1 = {};
  obj1 = {
    id: item.id,
    label: this.superLongTextHandle(item.name, 60, 12), //传参就行
    sortAttr: 0,
    sortAttr2: "a",
    size: 60,
  };
  this.visualData.nodes.push(obj1);
});

拓展：

因为label处理后会出现换行符，如需用到得先去掉

 let newLabel = model.label.replace(/\n/g, ""); //去除字符串里的\n

• 点击节点

//G6点击
events() {
  this.graph.on("node:click", (e) => { 
    let model = e.item.get("model");
    model.style.stroke = "#f00";  //点击后边的颜色
    model.style.lineWidth = 2;  //点击后边的狂赌
    e.item.update(model);
    let newLabel = model.label.replace(/\n/g, ""); //去除字符串里的\n
    this.nodeData.forEach((item) => { //所有节点的集合
      if (newLabel == item.name) {
  		//...一些操作
      }
    });
  });
},

• 移入、点击事件

参考：https://blog.csdn.net/weixin_45895370/article/details/122382227

效果：

//与defaultNode平级
nodeStateStyles: {
   // 鼠标 hover 上节点，即 hover 状态为 true 时的样式
   hover: {
     stroke: "yellow",
     lineWidth: 2,
   },
   // 鼠标点击节点，即 click 状态为 true 时的样式
   click: {
     stroke: "#000",
     lineWidth: 2,
   },
 },
 // 边不同状态下的样式集合
 edgeStateStyles: {
   // 鼠标点击边，即 click 状态为 true 时的样式
   click: {
     stroke: "yellow",
   },
 },

// 移入节点
this.graphDetail.on("node:mouseenter", (e) => {
  // 先将所有当前是 hover 状态的节点置为非 hover 状态
  const hoverNodes = this.graphDetail.findAllByState("node", "hover");
  hoverNodes.forEach((ce) => {
    this.graphDetail.setItemState(ce, "hover", false);
  });
  const nodeItem = e.item; // 获取鼠标进入的节点元素对象
  this.graphDetail.setItemState(nodeItem, "hover", true); // 设置当前节点的 hover 状态为 true
});
// 点击节点
this.graphDetail.on("node:click", (e) => {
  const clickNodes = this.graphDetail.findAllByState("node", "click");
  clickNodes.forEach((ce) => {
    this.graphDetail.setItemState(ce, "click", false);
  });
  const nodeItem = e.item;
  this.graphDetail.setItemState(nodeItem, "click", true);
});
// 点击边
this.graphDetail.on("edge:click", (e) => {
  const clickEdges = this.graphDetail.findAllByState("edge", "click");
  clickEdges.forEach((ce) => {
    this.graphDetail.setItemState(ce, "click", false);
  });
  const edgeItem = e.item;
  this.graphDetail.setItemState(edgeItem, "click", true);
});