antv g6 决策树,鼠标点击位置与节点位置偏移

最新推荐文章于 2025-03-21 15:49:34 发布
最新推荐文章于 2025-03-21 15:49:34 发布
阅读量1.1k 收藏 5
点赞数 1
文章标签： 决策树 javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_43557302/article/details/136699968
版权

在这里插入图片描述
问题:antv g6 决策树,鼠标点击位置与节点位置偏移
原因:父级transfrom影响

现象:鼠标点击位置与节点位置偏移
解决方案:
//添加supportCSSTransform属性时树形组件不受父级transform影响(代码中放开注释即可)

  // graph.get('canvas').set('supportCSSTransform', true) 

<template>
  <div style="transform: scale(1.2)">
    <div id="container"></div>
  </div>
</template>

<script>
import G6 from "@antv/g6";

export default {
  name: "index",
  mounted() {
    // console.log(777777778889);
//  this.treedata=    JSON.parse(JSON.stringify(this.treedata).replace(/"name"/g,'"label"'))
//   this.treedata=   JSON.parse(JSON.stringify(this.treedata).replace(/"sub_folder"/g,'"children"'))
    let nodesizeWidth = 90//节点高
    let nodesizeHeight = 30//节点宽
    let iconSize = 10//icon
    let label = 8//title
    let subLabel = 10//左下
    let sub2Label = 10//右下
    let increaseHeight = 10
    let increaseWidth = 34

    let backgroundColor = 'rgba(255,255,255,0.88)'
    let fontColor = 'rgb(0,0,0)'
    let trueincreaseColor = 'rgb(111,255,115)'
    let increaseFontColor = 'rgb(255,255,255)'
    let falseincreaseColor = 'rgb(255,0,0)'
    let circleColor = 'rgba(17,28,236,0.85)'
    let lineColor = 'rgba(83,124,248,0.85)'
    let strokelineColor = 'rgba(15,52,146,0.85)'//边框颜色
    let heardBackgroundColor = 'rgba(87,128,255,0.65)'//边框颜色
    this.init(increaseHeight, increaseWidth, sub2Label, label, subLabel, iconSize, nodesizeWidth, nodesizeHeight, heardBackgroundColor, strokelineColor, backgroundColor, fontColor, trueincreaseColor, falseincreaseColor, circleColor, lineColor, increaseFontColor);
  },
  // props:["treedata"],

  methods: {
    init(increaseHeight, increaseWidth, sub2Label, label, subLabel, iconSize, nodesizeWidth, nodesizeHeight, heardBackgroundColor, strokelineColor, color, fontColor, trueincreaseColor, falseincreaseColor, circleColor, lineColor, increaseFontColor) {

// root node
      G6.registerNode('root', {
        draw: (cfg, group) => {
          const size = [80, 30];
          const keyShape = group.addShape('rect', {
            attrs: {
              width: size[0],
              height: size[1],
              x: -size[0] / 2,
              y: -size[1] / 2,
              fill: color,
              stroke: strokelineColor,
              radius: 5
            },
            draggable: true,
            name: 'root-keyshape'
          });
          group.addShape('text', {
            attrs: {
              text: `${cfg.ratio}%`,
              fill: fontColor,
              fontSize: 6,
              x: 10 - size[0] / 2,
              y: 3,
            },
            draggable: true,
            name: 'ratio-shape'
          });
          group.addShape('text', {
            attrs: {
              text: `${cfg.label}`,
              fill: fontColor,
              fontSize: 9,
              x: -6,
              y: 0,
            },
            draggable: true,
            name: 'label-shape'
          });
          group.addShape('line', {
            attrs: {
              x1: -6,
              x2: 35,
              y1: 2,
              y2: 2,
              stroke: 'rgba(255, 255, 255, 0.85)',
              lineWidth: 0.5
            },
            draggable: true,
            name: 'divider-shape'
          });
          group.addShape('text', {
            attrs: {
              text: `${cfg.subLabel}`,
              fill: fontColor,
              fontSize: 6,
              x: -6,
              y: 10,
            },
            draggable: true,
            name: 'sublabel-shape'
          });
          return keyShape;
        }
      });

// other node
      G6.registerNode('othernode', {
        draw: (cfg, group) => {
          const size = [nodesizeWidth, nodesizeHeight];
          const keyShape = group.addShape('rect', {
            attrs: {
              width: size[0],
              height: size[1],
              x: -size[0] / 2,
              y: -size[1] / 2,
              fill: color,
              //节点边框颜色
              stroke: strokelineColor,
              // radius: 5,
              size: [270, 80],
            },
            draggable: true,
            name: 'level1node-keyshape'
          });
          // 背景板
          group.addShape('rect', {
            attrs: {
              x: -size[0] / 2,
              y: -size[1] / 2,
              width: size[0],
              height: size[1] / 2,
              // radius: 5,
              // radius: [0, 0, rectConfig.radius, rectConfig.radius],//锐角化
              fill: heardBackgroundColor // 填充色
            }
          })
          //图标
          group.addShape('image', {
            attrs: {
              x: size[0] / 2 - 12,
              y: -size[1] / 2 + 2,
              img: require('@/assets/感叹号中.png'),
              width: iconSize,
              height: iconSize,
              cursor: 'pointer'
            },
            name: 'gt'
          })
          group.addShape('image', {
            attrs: {
              x: size[0] / 2 - 24,
              y: -size[1] / 2 + 3,
              img: require('@/assets/闪电发货.png'),
              width: iconSize,
              height: iconSize,
              cursor: 'pointer'
            },
            name: 'sd'
          })

          group.addShape('text', {
            attrs: {
              text: `${cfg.label}`,
              fill: fontColor,
              fontSize: label,
              x: 10 - size[0] / 2,
              y: -2,
              textAlign: 'left'
            },
            draggable: true,
            name: 'label-shape'
          });

          //左下字
          group.addShape('text', {
            attrs: {
              text: `${cfg.subLabel}`,
              fill: fontColor,
              fontSize: subLabel,
              fontWeight: 800,
              x: 10 - size[0] / 2,
              y: 10,
              textAlign: 'left'
            },
            draggable: true,
            name: 'sublabel-shape'
          });


          group.addShape('rect', {
            attrs: {
              x: 12,
              y: 1,
              width: increaseWidth,
              height: increaseHeight,
              radius: 2,
              fill: cfg.increase ? trueincreaseColor : falseincreaseColor
            },
            draggable: true,
            name: 'ratio-box'
          })
          //右下字
          group.addShape('text', {
            attrs: {
              text: cfg.increase ? `+${cfg.ratio}%` : `-${cfg.ratio}%`,
              fill: increaseFontColor,
              fontSize: sub2Label,
              x: 18,
              y: 3,
              textAlign: 'left',
              textBaseline: 'top'
            },
            draggable: true,
            name: 'ratio-shape'
          });

          // edge end
          group.addShape('line', {
            attrs: {
              x1: -size[0] / 2,
              x2: -size[0] / 2 + 6,
              y1: 0,
              y2: 0,
              lineWidth: 1,
              stroke: lineColor,
            }
          });

          return keyShape;
        },
        update: undefined
      }, 'rect')

// edge
      G6.registerEdge('round-poly', {
        getControlPoints: (cfg) => {
          const {startPoint, endPoint} = cfg;
          return [
            startPoint,
            {
              x: startPoint.x,
              y: endPoint.y
            },
            endPoint
          ];
        }
      }, 'polyline')

      const data = {
        id: 'root',
        label: '利息收入',
        subLabel: '3,283.456',
        ratio: 3,
        children: [
          {
            id: 'child-a',
            label: '平均利息',
            subLabel: '9%',
            ratio: 1,
            increase: true,
            children: [
              {
                id: 'child-a-1',
                label: '平均利息1',
                subLabel: '9%',
                ratio: 1,
                increase: true,
                children: [
                  {
                    id: 'child-a-1-1',
                    label: '平均利息1-1',
                    subLabel: '9%',
                    ratio: 1,
                    increase: true,
                    tootip: {
                      leftData: '800万元',
                      rightData: '700万元'
                    }
                  },
                  {
                    id: 'child-a-1-2',
                    label: '平均利息1-2',
                    subLabel: '9%',
                    ratio: 1,
                    increase: true,
                    tootip: {
                      leftData: '800万元',
                      rightData: '700万元'
                    }
                  }]
              },
              {
                id: 'child-a-2',
                label: '平均利息2',
                subLabel: '9%',
                ratio: 1,
                increase: false,
              }]
          }, {
            id: 'child-b',
            label: '贷款余额',
            subLabel: '1,789,567',
            ratio: 23,
            increase: true,
            children: [{
              id: 'child-b-a',
              label: '投放金额',
              subLabel: '2,385,124',
              ratio: 17,
              increase: true,
              operator: '-',
            }, {
              id: 'child-b-b',
              label: '还款金额',
              subLabel: '595,557',
              ratio: 12,
              increase: true,
            }
            ]
          }, {
            id: 'child-c',
            label: '还款期限',
            subLabel: '7',
            ratio: 23,
            increase: true,
          }
        ]
      };

      G6.Util.traverseTree(data, subtree => {
        if (subtree.level === undefined) subtree.level = 0;
        // subtree.children?.forEach(child => child.level = subtree.level + 1);
        if (subtree.children && subtree.children.forEach) {
          subtree.children.forEach(child => {
            if (child) {
              child.level = subtree.level + 1;
            }
          });
        }

        switch (subtree.level) {
          case 0:
            subtree.type = 'root';
            break;
          default:
            subtree.type = 'othernode';
        }
      });

      const width = container.scrollWidth;
      const height = (container.scrollHeight || 500) - 30;

      const tooltip = new G6.Tooltip({
        getContent(e) {
          // console.log("e=======>", e)
          if (e.item._cfg.model.tootip != undefined) {
            const outDiv = document.createElement("div");
            if (e.item._cfg.type == "node") {
              outDiv.style.width = "150px";
              outDiv.innerHTML = `
                  <div style="border: 1px solid #06a6db;position: relative;z-index:12">
                    <div style="background-color: #0786e0;padding: 10px 20px; font-size:12px;">${e.item._cfg.model.label}</div>
                    <div style="padding: 12px;position: relative;z-index:12">
                      <span>${e.item._cfg.model.tootip.leftData}</span>
                      <span>-></span>
                      <span>${e.item._cfg.model.tootip.rightData}</span>

                    </div>
                  </div>
                `;
              return outDiv;
            } else {
              outDiv.style.display = "none";
              return outDiv;
            }
            offset: 10
          }
        },
        shouldBegin(e) {
          console.log("shouldBegin=======>e====>", e.item._cfg.model.tootip)
          if (e.item._cfg.model.tootip != undefined) {
            if (e.target.cfg.name == 'gt') {
              return true;
            }
          } else {
            return false;
          }
        },
        itemTypes: ['node'],
        offsetX: 0,
        offsetY: 0,
      });

      const tooltip2 = new G6.Tooltip({
        getContent(e) {
          const outDiv = document.createElement("div");
          if (e.item._cfg.type == "node") {
            outDiv.style.width = "150px";
            outDiv.innerHTML = `
                  <div style="border: 1px solid #06a6db;position: relative;z-index:12">
                    <div style="background-color: #f5f5f5;padding: 10px 20px; font-size:12px;">血缘归因</div>
                  </div>
                `;
            return outDiv;
          } else {
            outDiv.style.display = "none";
            return outDiv;
          }
        },
        shouldBegin(e) {
          // console.log("shouldBegin=======>e====>", e)
          if (e.target.cfg.name == 'sd') {
            return true;
          }
        },
        itemTypes: ['node']
      });

      const graph = new G6.TreeGraph({
        container: 'container',
        width,
        height,
        fitView: true,
        layout: {
          type: 'compactBox',

          preventOverlap: true, // 防止节点重叠
          nodeSize: 50,
          // linkDistance: 150,// 指定边距离为150
          rankdir: "LR", // 展示方向
          nodesep: 40, // 节点间距
          ranksep: 1000, // 层间距

          direction: 'LR',
          getHGap: function getVGap() {
            return 5;
          },
        },
        defaultEdge: {
          type: 'round-poly',
          sourceAnchor: 0,
          targetAnchor: 1,
          style: {
            radius: 8,
            stroke: lineColor
          }
        },
        defaultNode: {
          size: [200, 40],
          anchorPoints: [
            [0.9, 0.5],
            [0, 0.5]
          ]
        },
        nodeStateStyles: {
          hover: {
            fill: '#fff',
            shadowBlur: 30,
            shadowColor: '#dc3434',
          },
          operatorhover: {
            'operator-box': {
              opacity: 1
            }
          }
        },
        plugins: [tooltip, tooltip2], //浮框样式
        modes: {
          default: ['zoom-canvas', 'drag-canvas', 'collapse-expand']
        }
      });

      graph.on('node:mouseenter', e => {
        // if (e.target.get('name')?.includes('operator')) {
        // if (e.target && e.target.get && e.target.get('name') && e.target.get('name').includes('operator')) {
        //
        //   graph.setItemState(e.item, 'operatorhover', true);
        // } else {
        graph.setItemState(e.item, 'hover', true);
        // }
      })
      graph.on('node:mouseleave', e => {
        graph.setItemState(e.item, 'operatorhover', false);
        graph.setItemState(e.item, 'hover', false);
      });

      //添加supportCSSTransform属性时树形组件不受父级transform影响

      // graph.get('canvas').set('supportCSSTransform', true)

      graph.data(data);
      graph.render();

    },
  },
};
</script>
AntV G6 使用 IconFont
qq_40890601的博客
03-01 4218
效果如下： 在阿里巴巴矢量图标库 选好图标加入购物车->添加购物车->添加至项目（没有项目就新建一个）-> 下载至本地 解压将以下文件命名为icon（自定义） 引入项目中， @import "./components/icon/iconfont.css"; 注册iconfont 节点 export function registerNode() { G6.registerNode('iconfont', { draw(cfg, group) { const {
antv g6 禁止移动_Antv/g6 自定义节点后拖动不流畅问题解决
weixin_39959615的博客
12-22 4444
初次使用G6，用的是官网推荐的Workflow Designer。使用后发现里面的自定义节点有时候会出现拖动失灵的情况，需要点击节点，按下许久再拖动,才不会出现拖不动的情况，这个问题困扰了很久，严重影响操作交互体验。后面发现凡是点击到自定义添加的图形图标和文字上都会出现拖不动的问题。自定义节点如下：drawLabel:(cfg,group)=>{const description = gro...
Antv G6 坐标异常问题
qq_47730141的博客
04-08 1700
需要再每次父节点的css scale 样式改变时调用。只用在实例图表对象时调用一次。
[antvG6]实现节点平滑缩放动画
最新发布
CWT19940910的博客
03-21 186
在现代数据可视化中，节点动画是提升用户体验和交互效果的重要手段。本文将介绍如何使用G6图可视化库为节点添加平滑的缩放动画，并探讨其应用场景和实现原理。
AntV G6鼠标移入、单击、双击节点，获取节点信息
笑到世界都狼狈的博客
12-24 1万+
如下图所示，对节点常用的事件如下图所示： 主要代码： // 鼠标进入节点 this.graph.on('node:mouseenter', (e) => { const nodeItem = e.item // 获取鼠标进入的节点元素对象 console.log('鼠标移入', nodeItem._cfg) }) // 单击节点 this.graph.on('node:click', (e) => { const nodeItem = e.item // 获取被
AntV G6根据节点id，定位到节点位置
qq_41411324的博客
03-06 2564
搜索某个节点，移动画布，至节点位于视图中心位置。
探秘AntV G：无界渲染引擎的创新实践
gitblog_00010的博客
05-16 542
探秘AntV G：无界渲染引擎的创新实践 去发现同类优质开源项目:https://gitcode.com/ 在前端图形与数据可视化领域，强大的底层渲染引擎是打造高质量用户体验的关键。AntV团队倾力打造的G渲染引擎，以其卓越的技术特性与应用场景，为开发者提供了一个全新的选择。无论你是数据可视化的爱好者还是专业开发者，G都将助你在2D/3D图形绘制和高性能计算上迈出坚实的一步。 项目介绍 AntV ...
vue antv g6 编辑器
09-15
在"vue antv g6 编辑器"项目中，我们可以看到一系列配置文件，这些文件对于优化开发环境、代码质量和构建流程至关重要。下面将详细解释每个文件的作用和在Vue.js项目中的重要性。 1. `.browserslistrc`：这是一个...
antv g6 animate
12-18
《AntV G6 Animate：探索图形动画的魅力》 在数据可视化领域，AntV G6 是一款备受赞誉的图可视化库，它提供了丰富的图形绘制能力，帮助开发者将复杂的数据关系以直观的方式呈现出来。而“AntV G6 Animate”正是这个...
antv g6框架离线引用js包
04-26
在前端开发领域，AntV G6 是一个强大的图形构建框架，专为数据可视化设计。它由阿里云的 AntV 团队开发，提供了一系列高级 API 和丰富的图表类型，帮助开发者轻松构建复杂的图可视化应用。本话题主要关注如何在离线...
antv g2、g6 自定义扩展
04-30
g2自定义 3d柱状图、分割柱状图及g6 自定义卡片
Vue3项目使用G6可视化组件实现一个树形机构图
都随它大小便吧
10-24 1789
之前一直使用Echarts或Highcharts实现图表，也有听说G2/G6这些玩意，于是在项目中使用看看效果，还不错的样子。
AntV G6将节点修改成图片
笑到世界都狼狈的博客
12-23 9287
1.在每个节点中添加图片 代码布局如下： 实现效果如下图： 主要代码： defaultNode: { // 节点样式修改 type: 'image', // 设置节点为图片 size: [40, 40] // 节点大小 } { id: 'node4', label: '引擎', img: 'https://yyb.gtimg.com/aiplat/page/product/visionimgidy/img/demo6-16a47e5d31.jpg?max_age=.
G6中的内置Behavior中的tooltip位置偏移出现问题
咸鱼翻身之路
08-15 1858
解决G6中内置Behavior中的tooltip的位置偏移问题
antv g6实现自定义决策树 vue2
qq_43557302的博客
03-08 983
antv g6实现自定义决策树 vue2。
antv g6对接后台数据_AntV G6绘制流程图学习例子
weixin_42361933的博客
12-24 729
var Util = G6.Util;// 设置数据var data = {"source": {"nodes": [{"shape": "circle",//节点形状，默认矩形， circle圆形，rhombus菱形，可放图片url"label": "开始",//节点名称color:'red',//设置节点背景色"size": [88,40],//节点框大小(长宽)"x": 720,//水平坐标...
antv g6 摸索总结—新手入门
热门推荐
想卷回去的小菜鸡的博客
07-06 1万+
通过antvG6官网内置API实现树图的加载绚烂，以及对各个属性进行详细讲解，把过程中遇到的问题以及解答方案一一列举，随着各种需求，不断更新。
【vue2+antvx6】vue节点高度改变，连接桩跟着改变
Qxn530的博客
03-31 1757
第一种情况 ：连接桩左右各一个，且是在中心点的位置；第二种情况：连接桩一个在中心点，一个固定位置
如何解决antv g6 左右布局不均匀的问题
liujing529的博客
08-30 465
当自定义中间节点时，第一次进入到页面时，左右布局分配不均匀，使用的antv G6的mindmap 布局，当 把 graph.node 方法注释掉后，效果就是正确的。
antv g6 节点 label 偏移
05-30
您可以使用AntV G6中节点的labelOffset属性来实现节点label的偏移。例如，将节点label向右偏移10个像素： ``` const node = graph.addNode({ id: 'node1', label: '节点1', labelOffsetX: 10, x: 100, y: 100, }); ``` 您也可以将labelOffsetY设置为正值来向下移动label。如果您需要微调label的位置，还可以使用labelPosition属性来指定节点label的位置。例如，将节点label位置设置为右上角： ``` const node = graph.addNode({ id: 'node1', label: '节点1', labelPosition: 'right-top', x: 100, y: 100, }); ``` 希望这能够帮助您解决节点label偏移的问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值