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

Vue kapselt ein TodoList-Beispiel und implementiert die Anwendung des lokalen Browser-Cache

So zeichnen Sie eine Mindmap in einem Miniprogramm

Inhaltsverzeichnis

Was ist eine Mindmap?

Wie zeichnet man in F6

Alipay

WeChat

Zusammenfassen

Vue kapselt ein TodoList-Beispiel und implementiert die Anwendung des lokalen Browser-Cache

Docker-Compose erstellt eine Brücke, fügt ein Subnetz hinzu und löscht eine Netzwerkkarte

Zusammenfassung zur Anwendung dekorativer Elemente im Webdesign

Dieser Artikel zeigt Ihnen das Prinzip der MySQL Master-Slave-Synchronisation

Detaillierte Erklärung von BOM und DOM in JavaScript

So erstellen Sie eine my.ini-Datei im MySQL 5.7.19-Installationsverzeichnis

Detaillierte Erklärung der grundlegenden Typen von TypeScript

Probleme mit Sperren in MySQL

Vier völlig unterschiedliche Erfahrungen im Interaktionsdesign der Apple Watch enthüllt

Ein netter HTML-Druckcode unterstützt das Umblättern

Artikel empfehlen

Das Lazy-Loading-Attributmuster in JavaScript verstehen

Layout im Vue.js-Stil Allgemeine Fähigkeiten zur Flutter-Geschäftsentwicklung

Vue implementiert eine Countdown-Schaltfläche für den Bestätigungscode

Eine kurze Diskussion über die magischen Verwendungsmöglichkeiten von CSS-Pseudoelementen und Pseudoklassen

Lösung für viele Zeilenumbrüche und Wagenrückläufe in MySQL-Daten

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

XHTML-Tutorial für den Einstieg: Häufig verwendete XHTML-Tags

Beispielcode, wie CSS mehrere Klassen abgleicht

Beispieltest MySQL-Enumerationstyp

MySQL verwendet inet_aton und inet_ntoa, um IP-Adressdaten zu verarbeiten

Detaillierte Erläuterung zur Verwendung von Docker zum schnellen Bereitstellen der ELK-Umgebung (neueste Version 5.5.1)

Detaillierter Installationsprozess und Prinzip des Vue-Routers

MySQL-Index-Pushdown in fünf Minuten verstehen

mysql 8.0.19 winx64.zip Installations-Tutorial

Sechs Methoden zur Nginx-Optimierung