Comment implémenter des opérations de fusion et de division de nœuds dans des cartes mentales à l'aide de Vue et jsmind ?

Comment implémenter des opérations de fusion et de division de nœuds dans des cartes mentales à l'aide de Vue et jsmind ?

La carte mentale est un outil courant pour organiser et afficher des informations. Elle organise et affiche les pensées et les opinions à travers des nœuds et des lignes de connexion dans une structure arborescente. Dans les applications pratiques, nous devons parfois fusionner et diviser des nœuds dans la carte mentale pour mieux gérer et afficher les informations. Cet article expliquera comment utiliser les bibliothèques Vue et jsmind pour implémenter des opérations de fusion et de fractionnement de nœuds dans des cartes mentales, et donnera des exemples de code correspondants.

Tout d'abord, nous devons présenter les bibliothèques Vue et jsmind. Il peut être introduit via CDN, ou installé et introduit via npm. Ensuite, nous devons créer un composant Vue pour héberger la carte mentale.

<template>
  <div id="jsmind-container"></div>
</template>

<script>
export default {
  mounted() {
    this.initMindMap();
  },
  methods: {
    initMindMap() {
      const options = {
        container: 'jsmind-container',
        editable: true,
        theme: 'primary'
        // 其他配置项
      };

      const mind = {
        meta: {
          name: '思维导图',
          author: 'Vue+jmind',
          version: '1.0'
        },
        format: 'free',
        data: [
          // 初始节点数据
        ],
      };

      this.mindMap = jsMind.show(options, mind);
    }
  }
}
</script>

<style>
#jsmind-container {
  width: 100%;
  height: 500px;
}
</style>

Dans la fonction hook montée du composant Vue, nous appelons la méthode initMindMap pour initialiser la carte mentale. Tout d'abord, nous définissons un objet options, dans lequel l'attribut container spécifie l'identifiant de l'élément conteneur de la carte mentale, et l'attribut editable est défini sur true indique que la carte mentale peut être modifiée, et l'attribut theme est défini sur « primaire » pour spécifier le thème utilisé. Ensuite, nous définissons un objet mind pour définir les données initiales du nœud de la carte mentale. Il s'agit simplement d'une donnée vide qui doit être remplie en fonction de la situation réelle. initMindMap方法来初始化思维导图。首先，我们定义了一个options对象，其中container属性指定了思维导图的容器元素的id，editable属性设置为true表示思维导图可以编辑，theme属性设置为'primary'来指定使用的主题。接着，我们定义了一个mind对象来设置初始的思维导图节点数据。这里只是一个空的数据，需要根据实际情况进行填充。

接下来，我们需要实现节点合并操作。在思维导图中，我们可以通过将多个相邻的节点合并为一个节点，以减少冗余的信息和节点数量。在Vue组件中，我们可以在合适的地方添加一个按钮，用来触发节点合并操作。

<template>
  <div>
    <div id="jsmind-container"></div>
    <button @click="mergeNodes">合并节点</button>
  </div>
</template>

<script>
export default {
  methods: {
    mergeNodes() {
      const selectedNodes = this.mindMap.get_selected_node(); // 获取选中的节点
      const parent = selectedNodes[0].parent; // 获取选中节点的父节点

      // 获取选中节点的子节点
      const children = selectedNodes.map(node => {
        return {
          ...node,
          children: node.children
        };
      });

      // 创建新的节点
      const mergedNode = {
        id: 'newNode',
        topic: '合并节点',
        children: children
      };

      // 更新父节点的子节点数据
      const parentData = parent.data;
      const index = parentData.findIndex(node => node.id === selectedNodes[0].id);
      parentData.splice(index, 1, mergedNode);

      this.mindMap.update_node(parent, parentData); // 更新父节点数据
    }
  }
}
</script>

在mergeNodes方法中，我们首先通过this.mindMap.get_selected_node()方法获取选中的节点，然后通过parent属性获取该节点的父节点。接着，我们使用map方法将选中的节点转换为新的节点数据，并将原本的子节点数据保存。然后，我们创建一个新的节点，将选中节点的子节点作为新节点的子节点属性。接下来，我们更新父节点的子节点数据，并使用this.mindMap.update_node方法来更新父节点的数据。

类似地，我们可以实现节点拆分操作。拆分操作是将一个节点拆分为多个子节点的操作，以便展示更详细的信息。

<template>
  <div>
    <div id="jsmind-container"></div>
    <button @click="splitNode">拆分节点</button>
  </div>
</template>

<script>
export default {
  methods: {
    splitNode() {
      const selectedNode = this.mindMap.get_selected_node()[0]; // 获取选中的节点

      // 拆分节点为多个子节点
      const children = selectedNode.children.map((child, index) => {
        return {
          id: 'newNode_' + index,
          topic: child.topic
        };
      });

      // 更新选中节点的子节点数据
      this.mindMap.move_node(selectedNode, children);
    }
  }
}
</script>

在splitNode方法中，我们首先通过this.mindMap.get_selected_node()方法获取选中的节点，然后使用map方法将选中节点的子节点转换为多个子节点的数据。拆分操作中，我们只改变子节点的id和topic属性，并将其保存在一个新的数组中。接着，我们使用this.mindMap.move_node

Ensuite, nous devons implémenter l'opération de fusion de nœuds. Dans une carte mentale, nous pouvons réduire les informations redondantes et le nombre de nœuds en fusionnant plusieurs nœuds adjacents en un seul nœud. Dans le composant Vue, nous pouvons ajouter un bouton à l'endroit approprié pour déclencher l'opération de fusion de nœuds.

rrreee

Dans la méthode mergeNodes, nous obtenons d'abord le nœud sélectionné via la méthode this.mindMap.get_selected_node(), puis nous l'obtenons via le parent Le nœud parent de ce nœud. Ensuite, nous utilisons la méthode <code>map pour convertir le nœud sélectionné en nouvelles données de nœud et enregistrer les données du nœud enfant d'origine. Ensuite, nous créons un nouveau nœud et utilisons les nœuds enfants du nœud sélectionné comme attributs de nœud enfant du nouveau nœud. Ensuite, nous mettons à jour les données du nœud enfant du nœud parent et utilisons la méthode this.mindMap.update_node pour mettre à jour les données du nœud parent. 🎜🎜De même, nous pouvons mettre en œuvre des opérations de fractionnement de nœuds. L'opération de fractionnement est l'opération consistant à diviser un nœud en plusieurs sous-nœuds afin d'afficher des informations plus détaillées. 🎜rrreee🎜Dans la méthode splitNode, nous obtenons d'abord le nœud sélectionné via la méthode this.mindMap.get_selected_node(), puis utilisons la map méthode pour Les nœuds enfants du nœud sélectionné sont convertis en données de plusieurs nœuds enfants. Dans l'opération de fractionnement, nous modifions uniquement les attributs id et topic des nœuds enfants et les enregistrons dans un nouveau tableau. Ensuite, nous utilisons la méthode this.mindMap.move_node pour remplacer les données du nœud sélectionné par les nouvelles données du nœud enfant. 🎜🎜En mettant en œuvre des opérations de fusion et de fractionnement de nœuds, nous pouvons gérer les informations de la carte mentale de manière plus flexible. Les exemples de code ci-dessus sont implémentés sur la base des bibliothèques Vue et jsmind. Vous pouvez également implémenter des fonctions similaires dans d'autres frameworks et bibliothèques selon vos propres besoins. J'espère que cet article vous sera utile pour votre apprentissage et votre développement ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!