有偿解决100R，一个简单的小需求，点击添加子节点并附带一个小节点

[Itachi-1]

import G6 from '@antv/g6';
let data = {
"id": "G1",
"children": [
{
"id": "G2",
"children": [
{
"id": "G4"
},
{
"id": "G5"
}
]
},
{
"id": "G3",
"children": [
{
"id": "G6"
},
{
"id": "G7"
}
]
}
]
}
const container = document.getElementById('container');
const width = container.scrollWidth;
const height = container.scrollHeight || 500;
const graph = new G6.TreeGraph({
container: 'container',
width,
height,
linkCenter: true,
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: 'line',
},
layout: {
type: 'dendrogram',
direction: 'TB', // H / V / LR / RL / TB / BT
nodeSep: 40,
rankSep: 100,
},
});

graph.node(function (node) {
  let position = 'right';
  let rotate = 0;
  if (!node.children) {
    position = 'bottom';
    rotate = Math.PI / 2;
  }
  return {
    label: node.id,
    labelCfg: {
      position,
      offset: 5,
      style: {
        rotate,
        textAlign: 'start',
      },
    },
  };
});

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

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

刚接触G6不太熟悉，一个需求点卡住了，你复制这串代码到在线编辑器上，树图
需求是，例如我点击G3,生成一个G3的子节点G8，同时G3到G8的线上，生成一个小一号的圆
解决有偿，联系方式QQ,857627760，需求截止日期8.16前

[Itachi-1]

点击时我使用G6.registerEdge，他给我每一条边都加上了小一号的圆