The issue has been closed

【箭头方向】edge 为 cubic-horizontal时，箭头没有随着曲线方向 #4686

visiky posted onGitHub

Describe the bug

复现代码

import G6 from '@antv/g6';
const data = {
  nodes: [
    {
      id: '0',
      label: '0',
    },
    {
      id: '1',
      label: '1',
    },
    {
      id: '2',
      label: '2',
    },
    {
      id: '3',
      label: '3',
    },
    {
      id: '4',
      label: '4',
    },
    {
      id: '5',
      label: '5',
    },
    {
      id: '6',
      label: '6',
    },
    {
      id: '7',
      label: '7',
    },
    {
      id: '8',
      label: '8',
    },
    {
      id: '9',
      label: '9',
    },
  ],
  edges: [
    {
      source: '0',
      target: '1',
    },
    {
      source: '0',
      target: '2',
    },
    {
      source: '1',
      target: '4',
    },
    {
      source: '0',
      target: '3',
    },
    {
      source: '3',
      target: '4',
    },
    {
      source: '4',
      target: '5',
    },
    {
      source: '4',
      target: '6',
    },
    {
      source: '5',
      target: '7',
    },
    {
      source: '5',
      target: '8',
    },
    {
      source: '8',
      target: '9',
    },
    {
      source: '2',
      target: '9',
    },
    {
      source: '3',
      target: '9',
    },
  ],
};

const container = document.getElementById('container');
const width = container.scrollWidth;
const height = container.scrollHeight || 500;
const graph = new G6.Graph({
  container: 'container',
  width,
  height,
  fitView: true,
  modes: {
    default: ['drag-canvas', 'drag-node'],
  },
  layout: {
    type: 'dagre',
    rankdir: 'LR',
    align: 'UL',
    controlPoints: true,
    nodesepFunc: () => 1,
    ranksepFunc: () => 1,
  },
  defaultNode: {
    size: [30, 20],
    type: 'rect',
    style: {
      lineWidth: 2,
      stroke: '#5B8FF9',
      fill: '#C6E5FF',
    },
  },
  defaultEdge: {
    type: 'cubic-horizontal',
    // type: 'polyline',
    size: 1,
    color: '#e2e2e2',
    style: {
      endArrow: {
        path: 'M 0,0 L 8,4 L 8,-4 Z',
        fill: '#e2e2e2',
      },
      radius: 20,
    },
  },
});
graph.data(data);
graph.render();

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);
  };

Your Example Website or App

https://g6.antv.antgroup.com/zh/examples/net/dagreFlow/#lrDagreUL

Steps to Reproduce the Bug or Issue

实际效果

Expected behavior

期望效果

Screenshots or Videos

No response

Platform

OS: [e.g. macOS, Windows, Linux]
Browser: [e.g. Chrome, Safari, Firefox]
Version: [e.g. 91.1]

Additional context

No response

这是随了边终点的切线斜率的，终点位置的微分斜率就是横向的哈

posted by Yanyan-Wang almost 2 years ago

我也遇到了这样的情况

const testData: GraphDataType = {
  nodes: [
    {
      "id": "111874871",
      label: "洪锋",
      img,
      style: {
        fill: '#f00',
      }
    },
    {
      "id": "5975335",
      "type": "Company",
      label: "北京小米电子软件技术有限公司",
    },
    {
      "id": "46326745",
      "type": "Company",
      label: "珠海小米金融科技有限公司",
    },
    {
      "id": "61422172",
      "type": "Person",
      label: "林斌",
    },
    {
      "id": "105738161",
      "type": "Person",
      label: "黎万强",
    },
  ],
  edges: [
    {
      "id": "109372691",
      "type": "loop",
      name: "老板",
      "source": "111874871",
      "target": "111874871",
    },
    {
      "id": "109372698",
      name: "监事",
      "source": "111874871",
      "target": "46326745",
    },
    {
      "id": "109372696",
      name: "2222",
      "source": "111874871",
      "target": "46326745",
      type: 'arc',
      label: '                                ',
    },
    {
      "id": "223599739",
      name: "董事",
      "source": "61422172",
      "target": "5975335",
    },
    {
      "id": "109372697",
      name: "2222",
      "source": "61422172",
      "target": "5975335",
      type: 'arc',
      label: '                                ',
    },
    {
      "id": "223599731",
      name: "董事长",
      "source": "111874871",
      "target": "5975335",
    },
    {
      "id": "223599743",
      name: "监事",
      "source": "105738161",
      "target": "5975335",
    },
  ],
}

const graph = new G6.Graph({
      container,
      width,
      height,
      fitCenter: true,
      layout: {
        type: 'force2',
        preventOverlap: true,
      },
      animate: true,
      plugins: [tooltip],
      modes: modes as any,
      defaultNode: {
        size: NODE_SIZE,
        type: 'iconfont',
        style: {
          fill: NODE_DEFAULT_COLOR,
          stroke: NODE_DEFAULT_COLOR,
        },
        labelCfg: {
          position: 'bottom',
        },
      },
      defaultEdge: {
        labelCfg: {
          autoRotate: true,
        },
        style: {
          endArrow: {
            path: G6.Arrow.vee(),
          },
        },
      },
      nodeStateStyles: {
        selected: {
          fill: NODE_DEFAULT_COLOR,
          stroke: NODE_ACTIVE_COLOR,
          lineWidth: 4,
        }
      },
      edgeStateStyles: {
        selected: {
          stroke: NODE_ACTIVE_COLOR,
          lineWidth: 3,
        },
      },
    });

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

posted by yubo9807 about 1 year ago

arc模式线段，箭头方向也不对企业微信截图_17213710451133

posted by nancyzhan 9 months ago

Fund this Issue

$0.00

Funded

Pull requests