antv g6 折线边如何变为钝角

Question

刚刚接触g6，问问各位，通过什么参数设置让折线边变为钝角边而不是直角边

Answer 1

以下参考免费微信小程序：皆我百晓生 作答，并由阿齐Archie整理回复，若还有疑问可评论或留言。

在 G6 中，要将折线边变为钝角边，您需要自定义边的样式。以下是如何实现的详细步骤：

1. 首先，确保您已经安装了 G6。如果还没有安装，请使用 npm 或 yarn 安装它：

npm install @antv/g6

或者

yarn add @antv/g6

1. 在您的 JavaScript 文件中，引入 G6：

import { Graph } from '@antv/g6';

1. 创建一个 G6 图实例，并设置容器、宽高等配置：

const graph = new Graph({
  container: 'container', // 指定挂载的容器 ID
  width: 800, // 画布宽度
  height: 600, // 画布高度
});

1. 定义一个自定义边形状的函数，该函数将根据您提供的参数生成一个带有钝角的多边形路径：

function getDullEdgeShape(cfg) {
  const points = cfg.points; // 获取边的顶点数组
  const size = 10; // 设置多边形的边长
  const path = []; // 初始化路径数组

  // 遍历顶点，生成多边形路径
  for (let i = 0; i < points.length; i++) {
    const point = points[i];
    const nextPoint = points[i === points.length - 1 ? 0 : i + 1];
    const dx = nextPoint.x - point.x;
    const dy = nextPoint.y - point.y;

    // 计算两个顶点之间的中点
    const midX = (point.x + nextPoint.x) / 2;
    const midY = (point.y + nextPoint.y) / 2;

    // 计算偏移量，以生成钝角
    const offsetX = size * (dy / Math.sqrt(dx * dx + dy * dy));
    const offsetY = size * (-dx / Math.sqrt(dx * dx + dy * dy));

    // 添加路径点
    path.push(['M', midX - offsetX, midY - offsetY]);
    path.push(['L', midX + offsetX, midY - offsetY]);
    path.push(['L', nextPoint.x, nextPoint.y]);
  }

  return path;
}

1. 在图的边样式中，使用自定义的边形状函数：

graph.edge({
  shape: 'custom', // 设置边的形状为自定义
  customEdgeShape: getDullEdgeShape, // 使用自定义的边形状函数
});

1. 将数据添加到图中，并渲染：

const data = {
  nodes: [
    // 定义节点数据
  ],
  edges: [
    // 定义边数据
  ],
};

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

通过以上步骤，您应该能够在 G6 中实现将折线边变为钝角边的效果。您可以根据需要调整 getDullEdgeShape 函数中的参数，以生成不同形状的钝角边。