测试文字

在AntV G6中实现两种边类型的动态切换，可以通过以下方案实现：

方案一：数据驱动切换（推荐）

// 1. 注册两种边类型
G6.registerEdge('default-edge', {
  // 默认边的绘制逻辑
});

G6.registerEdge('custom-edge', {
  // 自定义边的绘制逻辑（含图标）
});

// 2. 初始化图实例
const graph = new G6.Graph({
  defaultEdge: {
    type: 'default-edge', // 默认初始类型
    // ...其他默认配置
  }
});

// 3. 数据中指定边类型
const data = {
  nodes: [...],
  edges: [
    {
      source: 'node1',
      target: 'node2',
      type: 'default-edge' // 显式指定类型
    },
    {
      source: 'node2',
      target: 'node3',
      type: 'custom-edge' // 使用自定义边
    }
  ]
};

方案二：动态切换类型

// 切换单个边类型
function changeEdgeType(edgeId, newType) {
  graph.updateItem(edgeId, {
    type: newType
  });
}

// 批量切换所有边
function switchAllEdgesType(newType) {
  graph.getEdges().forEach(edge => {
    graph.updateItem(edge, {
      type: newType
    });
  });
}

// 通过下拉菜单切换示例
<select @change="e => handleEdgeTypeChange(e.target.value)">
  <option value="default-edge">默认边</option>
  <option value="custom-edge">自定义边</option>
</select>

// Vue处理函数
const handleEdgeTypeChange = (type) => {
  graph.getEdges().forEach(edge => {
    graph.updateItem(edge, {
      type: type,
      style: {} // 可同步更新样式
    });
  });
  graph.render();
};

方案三：条件渲染

// 在自定义边类型中实现条件渲染
G6.registerEdge('smart-edge', {
  draw(cfg, group) {
    if (cfg.showCustom) { // 根据数据字段判断
      // 绘制带图标的自定义边
    } else {
      // 绘制默认边样式
    }
  }
});

// 数据示例
edges: [
  { source: 'A', target: 'B', showCustom: true },
  { source: 'B', target: 'C', showCustom: false }
]

最佳实践建议：

1. 混合使用策略：在数据中通过type字段指定类型，同时保留全局默认类型
2. 状态管理：使用Vue的ref管理当前边类型状态

const edgeType = ref('default-edge');

watch(edgeType, (newVal) => {
  graph.getEdges().forEach(edge => {
    graph.updateItem(edge, { type: newVal });
  });
});

3. 性能优化：对于大规模拓扑图，建议使用graph.changeData()代替逐个更新

function batchUpdateEdgeType(newType) {
  const newData = JSON.parse(JSON.stringify(graph.save()));
  newData.edges.forEach(edge => edge.type = newType);
  graph.changeData(newData);
}

注意事项：

1. 确保切换类型前已经注册对应的边类型
2. 切换时可能需要同步更新边的样式配置
3. 使用graph.refresh()可以强制重渲染
4. 如果使用动画，建议在切换时添加过渡效果：

graph.updateItem(edge, {
  type: newType,
  animatable: {
    duration: 300,
    easing: 'easeQuadOut'
  }
});