So zeichnen Sie eine Mindmap in einem Miniprogramm

Inhaltsverzeichnis

Was ist eine Mindmap?
Wie zeichnet man in F6

Alipay
WeChat

Zusammenfassen

Was ist eine Mindmap?

Eine Mindmap (engl.: Mind Map), auch Brainmap, Mental Map, Brainstorming Map, Mindmap, Inspiration Triggering Map, Concept Map oder Thinking Map genannt, ist eine Grafik, die Informationen mit Bildern ordnet. Dabei wird ein zentrales Schlüsselwort oder eine zentrale Idee verwendet, um alle repräsentativen Wörter, Ideen, Aufgaben oder andere verwandte Elemente in einer strahlenförmigen Linie zu verbinden. Es können unterschiedliche Möglichkeiten zum Ausdruck der Ideen von Menschen genutzt werden, beispielsweise Einführung, visuelle Visualisierung, Systemaufbau und Klassifizierung. Es wird häufig in der Forschung, Organisation, Problemlösung und Politikgestaltung verwendet. Wikipedia

Mindmapping ist ein Denkwerkzeug, das in den 1970er Jahren vom Briten Tony Buzan vorgeschlagen wurde. Mit dem Zielthema als zentralem Knoten werden die Assoziationen kontinuierlich nach außen erweitert, zerlegt und untersucht, bis schließlich ein vollständiges Baumdiagramm entsteht. Aus der Perspektive des spezifischen Betriebsvorgangs kann es auch als Visualisierung des Explorationsprozesses verstanden werden, der die Ergebnisse jeder Assoziation vollständig aufzeichnet. Diese Form entspricht eher der Denkweise der Menschen und das fertige Bild vermittelt uns zudem ein greifbareres und umfassenderes Verständnis des Themas.

Da beim Mindmapping das Denken im Mittelpunkt steht und unsere normalen Aktivitäten untrennbar mit dem Denken verbunden sind, gibt es für Mindmapping ein sehr breites Spektrum an Anwendungsszenarien. Beispielsweise Zusammenfassung, Berichtspräsentation, Brainstorming usw. Zur Umsetzung benötigen Sie lediglich Stift und Papier, es gibt jedoch auch zahlreiche Online- und Standalone-Anwendungen, die Sie bei der Erstellung von Diagrammen unterstützen können. Wenn unser Produkt mehrere Ebenen verwandter Informationen zu einem Thema anzeigen muss, können wir eine Mindmap verwenden. Mit F6 können Sie im Miniprogramm ganz einfach Mindmaps zeichnen, wie den Effekt im Bild oben. Für Schüler mit entsprechenden Bedürfnissen ist es einen Versuch wert.

Wie zeichnet man in F6

Demonstrationsbeispiele finden Sie unter f6.antv.vision/zh/docs/exa…

Der Code in diesem Abschnitt wurde als Open Source freigegeben. Wenn Sie interessiert sind, können Sie ihn sich ansehen.

Alipaygithub.com/antvis/F6/t…

WeChatgithub.com/antvis/F6/t…

Alipay

Erstinstallation

npm installiere @antv/f6 @antv/f6-alipay -S

Daten.js

Standard exportieren {
  ID: 'Modellierungsmethoden',
  Kinder: [
    {
      id: 'Klassifizierung',
      Kinder: [
        {
          ID: 'Logistische Regression',
        },
        {
          ID: 'Lineare Diskriminanzanalyse',
        },
        {
          id: 'Regeln',
        },
        {
          id: 'Entscheidungsbäume',
        },
        {
          ID: 'Naive Bayes',
        },
        {
          ID: 'K nächster Nachbar',
        },
        {
          ID: 'Probabilistisches neuronales Netzwerk',
        },
        {
          ID: 'Support Vektor Maschine',
        },
      ],
    },
    {
      ID: „Konsens“,
      Kinder: [
        {
          ID: 'Modellvielfalt',
          Kinder: [
            {
              id: 'Unterschiedliche Initialisierungen',
            },
            {
              id: 'Unterschiedliche Parameterauswahl',
            },
            {
              id: 'Verschiedene Architekturen',
            },
            {
              id: 'Verschiedene Modellierungsmethoden',
            },
            {
              id: 'Verschiedene Trainingssätze',
            },
            {
              id: „Unterschiedliche Funktionssätze“,
            },
          ],
        },
        {
          ID: 'Methoden',
          Kinder: [
            {
              id: 'Klassifikatorauswahl',
            },
            {
              ID: 'Klassifikatorfusion',
            },
          ],
        },
        {
          ID: "Allgemein",
          Kinder: [
            {
              ID: 'Bagging',
            },
            {
              ID: "Boosting",
            },
            {
              ID: "AdaBoost",
            },
          ],
        },
      ],
    },
    {
      ID: "Regression",
      Kinder: [
        {
          ID: „Multiple lineare Regression“,
        },
        {
          ID: 'Partielle kleinste Quadrate',
        },
        {
          ID: „Mehrschichtiges Feedforward-Neuralnetzwerk“,
        },
        {
          ID: „Allgemeines neuronales Regressionsnetzwerk“,
        },
        {
          ID: "Support-Vektor-Regression",
        },
      ],
    },
  ],
};

index.json

{
  "Standardtitel": "MindMap",
  "Komponenten verwenden": {
    "f6-canvas": "@antv/f6-alipay/es/container/container"
  }
}

index.js

importiere F6 von „@antv/f6“;
importiere TreeGraph von „@antv/f6/dist/extends/graph/treeGraph“;
importiere { wrapContext } von '../../../common/utils/context';

Daten aus „./data“ importieren;

/**
 * Mindmap - verteilt Knoten automatisch auf beide Seiten*/

Seite({
  Leinwand: null,
  ctx: null,
  Renderer: '', // Mini, Mini-Native usw., wird von F6 benötigt, Umgebung markieren isCanvasInit: false, // Ist die Leinwand bereit? Graph: null,

  Daten: {
    Breite: 375,
    Höhe: 600,
    Pixelverhältnis: 2,
    forceMini: falsch,
  },

  beim Laden() {
    // Benutzerdefinierten Baum, Knoten usw. registrieren. F6.registerGraph('TreeGraph', TreeGraph);

    // Breite und Höhe des Fensters synchron ermitteln const { windowWidth, windowHeight, pixelRatio } = my.getSystemInfoSync();

    dies.setData({
      Breite: Fensterbreite,
      Höhe: Fensterhöhe,
      Pixelverhältnis,
    });
  },

  /**
   * Initialisieren Sie den CNAVAs-Rückruf und speichern Sie den erhaltenen Kontext im Cache.
   * @param {*} ctx Zeichenkontext
   * @param {*} rechteckige Breiten- und Höheninformationen * @param {*} Canvas-Canvas-Objekt, null, wenn das Rendering mini ist
   * @param {*} Renderer verwendet Canvas 1.0 oder Canvas 2.0, mini | mini-native
   */
  handleInit(ctx, Rechteck, Leinwand, Renderer) {
    dies.isCanvasInit = true;
    dies.ctx = wrapContext(ctx);
    dieser.renderer = Renderer;
    diese.Leinwand = Leinwand;
    dies.updateChart();
  },

  /**
   * Von Canvas versendete Ereignisse werden an Graph-Instanzen weitergeleitet*/
  handleTouch(e) {
    dieser.graph und dieser.graph.emitEvent(e);
  },

  updateChart() {
    const { Breite, Höhe, Pixelverhältnis } = this.data;

    // Erstellen Sie eine F6-Instanz this.graph = new F6.TreeGraph({
      Kontext: this.ctx,
      Renderer: dieser.Renderer,
      Breite,
      Höhe,
      Pixelverhältnis,
      fitView: wahr,
      Modi:
        Standard: [
          {
            Typ: „Reduzieren-Erweitern“,
            beiÄnderung: Funktion beiÄnderung(Element, reduziert) {
              const model = item.getModel();
              model.collapsed = reduziert;
              gibt true zurück;
            },
          },
          'Leinwand ziehen',
          'Zoom-Leinwand',
        ],
      },
      Standardknoten: {
        Größe: 26,
        Ankerpunkte: [
          [0, 0,5],
          [1, 0,5],
        ],
      },
      StandardEdge: {
        Typ: 'kubisch-horizontal',
      },
      Layout:
        Typ: 'Mindmap',
        Richtung: 'H',
        getHeight: Funktion getHeight() {
          Rückgabe 16;
        },
        getWidth: Funktion getWidth() {
          Rückgabe 16;
        },
        getVGap: Funktion getVGap() {
          Rückgabe 10;
        },
        getHGap: Funktion getHGap() {
          Rückgabe 50;
        },
      },
    });
    sei centerX = 0;
    dieser.graph.node(Funktion(Knoten) {
      if (node.id === 'Modellierungsmethoden') {
        centerX = Knoten.x;
      }

      // Der Wert der Position (da ESlint verschachtelte ternäre Ausdrücke verbietet, wird er extrahiert und separat geschrieben)
      lass position_value = null;
      wenn (Knoten.Kinder && Knoten.Kinder.Länge > 0) {
        Positionswert = "links";
      } sonst wenn (node.x > centerX) position_value = "rechts";
      sonst position_value = "links";

      zurückkehren {
        Bezeichnung: node.id,
        labelCfg: {
          Versatz: 5,
          Position: Positionswert,
        },
      };
    });

    dieser.graph.daten(Daten);
    dies.graph.render();
    dies.graph.fitView();
  },
});

index.axml

<f6-Leinwand
  Breite="{{width}}"
  Höhe="{{Höhe}}"
  forceMini="{{forceMini}}"
  pixelRatio="{{pixelRatio}}"
  beiBerührungsereignis="Berührungsgriff"
  beiInit="handleInit"
></f6-canvas>

WeChat

Erstinstallation

npm installiere @antv/f6-wx -S

@antv/f6-wx Da WeChat nicht sehr freundlich zu npm-Paketen ist, haben wir @antv/f6-wx gepackt, um Benutzern zu helfen, Vorgänge zu vereinfachen.

Daten.js

Wie oben

index.json

{
  "defaultTitle": "Mindmap",
  "Komponenten verwenden": {
    "f6-canvas": "@antv/f6-wx/canvas/canvas"
  }
}

index.wxml

<f6-Leinwand
  Breite="{{width}}"
  Höhe="{{Höhe}}"
  forceMini="{{forceMini}}"
  pixelRatio="{{pixelRatio}}"
  binden:onTouchEvent="handleTouch"
  bind:onInit="handleInit"
></f6-canvas>

index.js

importiere F6 aus „@antv/f6-wx“;
importiere TreeGraph von „@antv/f6-wx/extends/graph/treeGraph“;


Daten aus „./data“ importieren;

/**
 * Mindmap - verteilt Knoten automatisch auf beide Seiten*/

Seite({
  Leinwand: null,
  ctx: null,
  Renderer: '', // Mini, Mini-Native usw., wird von F6 benötigt, Umgebung markieren isCanvasInit: false, // Ist die Leinwand bereit? Graph: null,

  Daten: {
    Breite: 375,
    Höhe: 600,
    Pixelverhältnis: 1,
    forceMini: falsch,
  },

  beim Laden() {
    // Benutzerdefinierten Baum, Knoten usw. registrieren. F6.registerGraph('TreeGraph', TreeGraph);

    // Breite und Höhe des Fensters synchron ermitteln const { windowWidth, windowHeight, pixelRatio } = wx.getSystemInfoSync();

    dies.setData({
      Breite: Fensterbreite,
      Höhe: Fensterhöhe,
      // Pixelverhältnis,
    });
  },

  /**
   * Initialisieren Sie den CNAVAs-Rückruf und speichern Sie den erhaltenen Kontext im Cache.
   * @param {*} ctx Zeichenkontext
   * @param {*} rechteckige Breiten- und Höheninformationen * @param {*} Canvas-Canvas-Objekt, null, wenn das Rendering mini ist
   * @param {*} Renderer verwendet Canvas 1.0 oder Canvas 2.0, mini | mini-native
   */
  handleInit(Ereignis) {
    const {ctx, rect, canvas, renderer} = Ereignis.Detail
    dies.isCanvasInit = true;
    dies.ctx = ctx;
    dieser.renderer = Renderer;
    diese.Leinwand = Leinwand;
    dies.updateChart();
  },

  /**
   * Von Canvas versendete Ereignisse werden an Graph-Instanzen weitergeleitet*/
  handleTouch(e) {
    dieser.graph und dieser.graph.emitEvent(e.detail);
  },

  updateChart() {
    const { Breite, Höhe, Pixelverhältnis } = this.data;

    // Erstellen Sie eine F6-Instanz this.graph = new F6.TreeGraph({
      Kontext: this.ctx,
      Renderer: dieser.Renderer,
      Breite,
      Höhe,
      Pixelverhältnis,
      fitView: wahr,
      Modi:
        Standard: [
          {
            Typ: „Reduzieren-Erweitern“,
            beiÄnderung: Funktion beiÄnderung(Element, reduziert) {
              const model = item.getModel();
              model.collapsed = reduziert;
              gibt true zurück;
            },
          },
          'Leinwand ziehen',
          'Zoom-Leinwand',
        ],
      },
      Standardknoten: {
        Größe: 26,
        Ankerpunkte: [
          [0, 0,5],
          [1, 0,5],
        ],
      },
      StandardEdge: {
        Typ: 'kubisch-horizontal',
      },
      Layout:
        Typ: 'Mindmap',
        Richtung: 'H',
        getHeight: Funktion getHeight() {
          Rückgabe 16;
        },
        getWidth: Funktion getWidth() {
          Rückgabe 16;
        },
        getVGap: Funktion getVGap() {
          Rückgabe 10;
        },
        getHGap: Funktion getHGap() {
          Rückgabe 50;
        },
      },
    });
    sei centerX = 0;
    dieser.graph.node(Funktion(Knoten) {
      if (node.id === 'Modellierungsmethoden') {
        centerX = Knoten.x;
      }

      // Der Wert der Position (da ESlint verschachtelte ternäre Ausdrücke verbietet, wird er extrahiert und separat geschrieben)
      lass position_value = null;
      wenn (Knoten.Kinder && Knoten.Kinder.Länge > 0) {
        Positionswert = "links";
      } sonst wenn (node.x > centerX) position_value = "rechts";
      sonst position_value = "links";

      zurückkehren {
        Bezeichnung: node.id,
        labelCfg: {
          Versatz: 5,
          Position: Positionswert,
        },
      };
    });

    dieser.graph.daten(Daten);
    dies.graph.render();
    dies.graph.fitView();
  },
});

Zusammenfassen

Dies ist das Ende dieses Artikels zum Zeichnen einer Mindmap in einem Miniprogramm. Weitere Inhalte zum Zeichnen einer Mindmap in einem Miniprogramm finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: So lösen Sie das Problem, dass Seata die MySQL 8-Version nicht verwenden kann

>>: So stellen Sie MySQL- und Redis-Dienste mit Docker bereit

Detaillierte Erklärung des MySQL-Überwachungstools mysql-monitor

Erfahren Sie, wie Sie die neue Element-Traversal-Eigenschaft von JavaScript zum Durchlaufen von untergeordneten Elementen verwenden.

Artikel

So zeichnen Sie eine Mindmap in einem Miniprogramm

Inhaltsverzeichnis

Was ist eine Mindmap?

Wie zeichnet man in F6

Alipay

WeChat

Zusammenfassen

Detaillierte Erklärung des MySQL-Überwachungstools mysql-monitor

Analysieren Sie das Problem der Übertragung von Dateien und anderen Parametern in der Upload-Komponente von Element-UI

So verwenden Sie einen Gamecontroller in CocosCreator

Detaillierte Erklärung des Ungültigkeitsprozesses des VUE-Tokens

Erfahren Sie, wie Sie die neue Element-Traversal-Eigenschaft von JavaScript zum Durchlaufen von untergeordneten Elementen verwenden.

JS realisiert Video-Sperreffekt

Docker exec führt mehrere Befehle aus

Detaillierte Erläuterung der Konfigurationsmethode für den Lastenausgleich von Apache + Tomcat7 unter Windows

Detaillierte Erläuterung des Ausführungsprozesses der JavaScript-Engine V8

So reparieren Sie beschädigte MySQL-Datenbankdateien schnell mit den Tools myisamchk und mysqlcheck

Artikel empfehlen

Die Verwendung des V-Modells in Vue3-Komponenten und ausführliche Erklärung

Realisierung der Echtzeit-Dateisynchronisierung zwischen Linux-Servern

Detaillierte Erläuterung verschiedener Kommunikationswege zwischen Linux-Benutzerstatus und Kernelstatus

Fallstricke und Lösungen bei der MySQL-Zeitstempelvergleichsabfrage

Verwenden Sie Standard-DL-, DT- und DD-Tags, um Tabellenlisten zu verwerfen

Detaillierte Schritte zum Erweitern der LVM-Festplatte unter Linux

Beispielcode für die JS-Funktion „Anti-Shake“ und „Throttling“ zur Entwicklung von Webprojekten

Vue implementiert den Beispielcode zum Hinzufügen, Löschen, Ändern und Überprüfen der Baumstruktur

Detaillierte Erläuterung des MySQL Workbench-Nutzungs-Tutorials

Detaillierte Erklärung der Datentypen in den JavaScript-Grundlagen

Detaillierte Beispiele für den Unterschied zwischen den Methoden watch und computed in Vue.js

Mein CSS-Framework – base.css (Browser-Standardstil zurücksetzen)

Detaillierte Schritte zur Installation von Mysql5.7.19 mit yum auf Centos7

Der Prozess der Installation von SVN auf Ubuntu 16.04.5LTS

HTML-Auszeichnungssprache - Referenz