antvis/G6

🐛 树图更新边之后,再执行节点收起展开功能,边的类型没有变化 #4777

visiky posted onGitHub

问题描述

复现代码

import G6 from '@antv/g6';

fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
  .then((res) => res.json())
  .then((data) => {
    const container = document.getElementById('container');
    const width = container.scrollWidth;
    const height = container.scrollHeight || 500;
    data.children[0].collapsed = true
    const graph = new G6.TreeGraph({
      container: 'container',
      width,
      height,
      modes: {
        default: [
          {
            type: 'collapse-expand',
            onChange: function onChange(item, collapsed) {
              const data = item.get('model');
              data.collapsed = collapsed;
              return true;
            },
          },
          'drag-canvas',
          'zoom-canvas',
        ],
      },
      defaultNode: {
        size: 26,
        anchorPoints: [
          [0, 0.5],
          [1, 0.5],
        ],
      },
      defaultEdge: {
        type: 'cubic-horizontal',
      },
      layout: {
        type: 'mindmap',
        direction: 'H',
        getHeight: () => {
          return 16;
        },
        getWidth: () => {
          return 16;
        },
        getVGap: () => {
          return 10;
        },
        getHGap: () => {
          return 50;
        },
      },
    });
    let centerX = 0;
    graph.node(function (node) {
      if (node.id === 'Modeling Methods') {
        centerX = node.x;
      }

      return {
        label: node.id,
      };
    });

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

    // 更新边
    graph.getEdges().forEach(edge => {
      edge.update({ type: 'line' })
    })

    if (typeof window !== 'undefined')
      window.onresize = () => {
        if (!graph || graph.get('destroyed')) return;
        if (!container || !container.scrollWidth || !container.scrollHeight) return;
        graph.changeSize(container.scrollWidth, container.scrollHeight);
      };
  });

重现链接

https://codesandbox.io/s/g6-bian-geng-xin-hlhjmr

重现步骤

  1. edge 初始样式为 cubic-horizontal,
  2. 渲染结束之后,执行 update 更新 edge 为 line
  3. 点击 Classification 节点展开,后续边依然还是 cubic-horizontal

预期行为

期望边样式为更新后的样式

平台

  • 操作系统: [macOS, Windows, Linux, React Native ...]
  • 网页浏览器: [Google Chrome, Safari, Firefox]
  • G6 版本: [4.5.1 ... ]

屏幕截图或视频(可选)

No response

补充说明(可选)

No response


目前的解法是更新边设置的时候,同时调用一次 graph.edge 回调,将配置存储下来。

不过这个更像是 defaultEdge 的操作,有什么好的方案,可以更新默认边设置的吗?🤔️

posted by visiky over 1 year ago

可以用这个映射函数,在 render 之前调用

graph.edge(edge => { return { ...edge, type: 'line' } })

posted by Yanyan-Wang over 1 year ago

Fund this Issue

$0.00
Funded

Pull requests