From 480d1326e315054c7095a04dd6fcaa5a7571a2a9 Mon Sep 17 00:00:00 2001
From: nonzzz <812137533@qq.com>
Date: Wed, 5 Feb 2025 07:39:03 +0000
Subject: [PATCH] =?UTF-8?q?Deploying=20to=20gh-page=20from=20@=20nonzzz/sq?=
=?UTF-8?q?uarified@831959f5e66c7a688325bbe409aef8b875d7554b=20?=
=?UTF-8?q?=F0=9F=9A=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
api.html | 62 +
data.json | 21035 +++++++++++++++++++++++++++++++++++++++++
example.html | 22 +
getting-started.html | 75 +
index.html | 39 +
5 files changed, 21233 insertions(+)
create mode 100644 api.html
create mode 100644 data.json
create mode 100644 example.html
create mode 100644 getting-started.html
create mode 100644 index.html
diff --git a/api.html b/api.html
new file mode 100644
index 0000000..8f25bbf
--- /dev/null
+++ b/api.html
@@ -0,0 +1,62 @@
+squarified - Api Api
+All the methods and options of the squarified library are documented here.
+# Draw Layout ApiThe draw layout API is the main API for the treemap. It provides methods to draw the treemap layout.
+Now, the draw layout is opinionated and provides a minimalistic API to draw the treemap layout.
+# createTreemapCreate a new instance of the treemap. This method returns a new instance of the treemap.
+import { createTreemap } from 'squarified'
+const treemap = createTreemap ()The data transform API provides methods to transform the data into a format that the treemap can understand.
+# c2mConvert the original data into a format data that the treemap can understand. This method returns a new data format.
+import { c2m } from 'squarified'
+const data = [{ name : 'root' , value : 100 }, { name : 'root2' , value : 50 }, { name : 'root3' , value : 150 }]
+const transformedData = c2m (data, 'value' , (d ) => ({ ...d, label : d.name }))# findRelativeNodeFind the relative node of the given node. This method returns the relative node of the given node. Note: This function is based on the visit and respect the calculated coordinates.
+# findRelativeNodeByIdFind the relative node of the given node by id. This method returns the relative node of the given node by id. Note: This function is based on the visit.
+# flattenModuleFlatten the module. This method returns the flattened module.
+# getNodeDepthGet the depth of the node. This method returns the depth of the node.
+# sortChildrenByKeySort the children by key. This method returns the sorted children by key.
+# visitWalk Nodes.
Squarified Example
+
+
+
+
+
+
+
diff --git a/getting-started.html b/getting-started.html
new file mode 100644
index 0000000..8292677
--- /dev/null
+++ b/getting-started.html
@@ -0,0 +1,75 @@
+squarified - Getting Started Getting Started
+# Install squarifiedFirst, download and install this package from npm
+$ npm install squarified # The first applicationThis is a simple example of how to use it. Create a new file named index.html and pre.js in the same directory. copy and paste the following code into the files respectively and then run the index.html by a static server. (such as npx http-server)
+<!DOCTYPE html >
+<html lang ="en" >
+ <head >
+ <meta charset ="UTF-8" >
+ <meta name ="viewport" content ="width=device-width, initial-scale=1.0" >
+ <title > Squarified</title >
+ <style >
+ #app , html , body {
+ width : 100% ;
+ height : 100vh ;
+ }
+ </style >
+ </head >
+ <body >
+ <div id ="app" > </div >
+ <script src ="pre.js" > </script >
+ </body >
+</html >
+import { createTreemap, presetDecorator } from 'squarified'
+const data = [{
+ name : 'root' ,
+ weight : 100 ,
+ groups : [
+ { name : 'a' , weight : 10 },
+ { name : 'b' , weight : 20 },
+ { name : 'c' , weight : 30 },
+ { name : 'd' , weight : 40 },
+ ]
+}]
+const treemap = createTreemap ()
+treemap.use ('decorator' , presetDecorator ())
+const el = document .getElementById ('app' )
+treemap.init (el)
+treemap.setOptions ({ data }) squarified - A minimal and powerful treemap component. Squarified
+A treemap layout algorithm that optimizes for aspect ratio.
+Major features:
+Minimalistic API Powerful layout algorithm(Based on Squarified Treemaps ) Highly customizable Supports zooming and panning Check out the getting started guide to learn how to use.