Gelegentlich habe ich einen Artikel mit dem Titel „Warum machen Katzen...?“ gesehen, in dem einige Vorlieben und Verhaltensweisen von Katzen analysiert wurden. Die visuelle Gestaltung darin hat mich sehr angezogen. Sein Merkmal war die Verwendung eines handgezeichneten Stils und eines blasenartigen Layouts. Außerdem gefiel auch die schöne Schriftart. Ich mag Katzen sehr. Ich habe eine Katze namens Guagua (was süß und albern bedeutet). Ebenso bin ich Frontend-Entwickler. Ich habe ein Diagrammvisualisierungs-Framework namens AntV G6 entwickelt. Deshalb dachte ich, ich könnte mit diesem Framework ein ähnliches Design erreichen, und es stellte sich heraus, dass es mir gelang!

G6 basiert auf einer Rendering-Engine namens G. Es bietet ein Plugin, das Formen in einen handgezeichneten Stil konvertieren kann (im Wesentlichen basierend auf RoughJS).

Außerdem habe ich das von d3-hierarchy bereitgestellte Pack-Layout verwendet. Dank des Registrierungsmechanismus von G6 ist der Zugriff auf verschiedene Bibliotheken von Drittanbietern sehr einfach.

Das vollständige Beispiel finden Sie unter Warum Katzen?.

Wenn es Ihnen gefällt, können Sie meinem Projekt gerne einen Stern geben. Es ist mir sehr wichtig.