vue3 の antv X6 2.0 の味 (2)

この記事では主に、antv X6 キャンバス内の 2 つのノードが正常に接続されたときに実行される操作を記録します。

 graph.on('edge:connected', ({ isNew,edge }) => {

    // 这里的isNew是一个布尔值，代表两个节点是否连接成功 true为成功 false为失败
    if (isNew) {
      const sourceId = edge.getSourceCell().id // sourceId为源节点id
      const targetId = edge.getTargetCell().id // targetId为剪头指向的节点id

    // 当拿到这两个id就可以做一些操作了 举个例子：
       let arr =[{ label:'', children:[] }]
       if (sourceId && targetId) {
            arr[0].label=sourceId
            arr[0].children.push(targetNode)
       }
  })

次の図に示すように、2 つの ID がそれぞれノード 1 とノード 2 であることがわかります。

もちろん、ノードを追加するときにノード ID をカスタマイズしない場合、ID はデフォルトになります (長いリスト...)。ノードを追加するときに次のように設定するだけです。

    let count = 0
    let node = graph.addNode({
        shape: 'custom-rect',
        label: type,
        x: -50,
        y: -50,
        id: `节点${++count}`, // 设置节点id
    })

ちなみに、ノード生成後にノードIDを変更するとダメです！！！直接代入で修正しました！！！

比如这样：
node.id = '666'
这是错误的❌方法

antv X6 の公式メソッドのみを使用できます。パスはパスを指し、値は変更したいコンテンツを指します（本当にわからない場合は、ノードを直接出力して、ノードにどのような情報があるかを確認してください）

ノード情報を変更した後、2 つのノードが正常に接続されたときに、変更された情報を使用して何らかの操作を実行したい場合は、上記の変更方法のうち 1 つだけで目的の効果が得られます。つまり、ノードを追加するときの ID を直接変更します。必要です (つまり、addNode の操作)。graph.on('edge:connected') ノードが接続されると、エッジは新しいノードではなく古いノードの情報を指すためです。

キャンバス内に指定したノード ID があるかどうかを確認し、ノードを操作する必要がある場合は、次のメソッドを使用できます。

const findId = (data) => {
    const curID = data.label // 这个是你指定的id值

    const selectedNode = graph.getCellById(curID) // 在画布中查找是否有节点id等于curID
    // 这里说明一下，你一定要区分cell和node的关系，确认清楚你要的是cell的id还是node的id 我这里取的是cell
    console.log(selectedNode,'selectedNode')
    if (selectedNode) {
        reset(graph)
        selectedNode.attr('body/stroke', 'red') // 如果有 该节点边框颜色会变成红色
      }
}

上記の内容は個人的なフロントエンド学習の概要ですので、何か間違っている点がございましたら、ぜひコミュニケーションを取りながら一緒に学んでください~~~

(追記: 後で時間があれば、vue3+antv X6 2.0+elemnet plus の小さなデモを行ってください~これにより、一部の操作が理解しやすくなる可能性があります)

おすすめ