基本结构

README.md

@@ -0,0 +1,37 @@
+
+
+# 数据结构可视化
+
+
+
+### 基本框架
+
+
+
+SVG 过渡动画
+
+
+
+时间轴
+
+
+
+基本思路
+
+> 用户输入排序序列，然后首先js生成排序步骤。界面上显示排序顺序，同时生成每一帧中每个元素的详细位置（引入帧的概念）。
+>
+> 因为有帧的概念，所以可以实现进度条，进度条可以调整到任意一帧，css动画缓动到对应的位置。
+
+
+
+基本方法
+
+```
+创建画布
+
+创建元素
+改变元素位置，强调，大小，颜色，文本等
+
+元素缓动
+```
+

algorithm-visualization/assets/css/index.css

@@ -0,0 +1,21 @@
+html,
+body,
+.main {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+.main {
+  display: grid;
+  place-items: center;
+}
+
+#container {
+  /* background-color: #ddd; */
+  border: 1px solid #999;
+  border-radius: 5px;
+  box-shadow: 0 0 5px #999;
+  width: 700px;
+  height: 350px;
+}

algorithm-visualization/assets/js/class.js

@@ -0,0 +1,124 @@
+/**
+ * WorkSpace class v0.1.0
+ *
+ * @author  coder-xiaomo
+ * @date    2022-05-15
+ *
+ * Released under the MIT license
+ */
+class WorkSpace {
+    static settings = null;
+    static primaryCanvas = null;
+
+    constructor(settings) {
+        this.settings = settings
+
+        // 清除原有内容
+        settings.container.html("");
+
+        // 创建工作区SVG
+        this.primaryCanvas = settings.container.append("svg")
+            // 添加id
+            .attr("id", "primaryCanvas")
+            // 设置 SVG 宽高
+            .attr("width", "100%")
+            .attr("height", "100%")
+            // 背景色
+            .style("background-color", settings.colorMap["background"])
+    }
+}
+
+/**
+ * Shape class v0.1.0
+ *
+ * @author  coder-xiaomo
+ * @date    2022-05-15
+ *
+ * Released under the MIT license
+ */
+class Shape {
+    static workSpace = null;
+    constructor(workSpace) {
+        this.workSpace = workSpace
+    }
+
+    // 添加矩形
+    rectangle(id, x, y, width, height, fillColor, strokeColor) {
+        workSpace.primaryCanvas.append("rect")
+            .attr("id", id)
+            .attr("x", x)
+            .attr("y", y)
+            .attr("width", width)
+            .attr("height", height)
+            .style("fill", fillColor)
+            .style("stroke", strokeColor)
+    }
+
+    // 添加圆形
+    circle(id, x, y, radius, fillColor, strokeColor) {
+        workSpace.primaryCanvas.append("circle")
+            .attr("id", id)
+            .attr("cx", x)
+            .attr("cy", y)
+            .attr("r", radius)
+            .style("fill", fillColor)
+            .style("stroke", strokeColor)
+    }
+
+    // 添加文本
+    text(id, x, y, text, color) {
+        workSpace.primaryCanvas.append("text")
+            .attr("id", id)
+            .attr("x", x)
+            .attr("y", y)
+            .text(text)
+            .style("fill", color)
+    }
+
+    // 添加线
+    line(id, x1, y1, x2, y2, color) {
+        workSpace.primaryCanvas.append("line")
+            .attr("id", id)
+            .attr("x1", x1)
+            .attr("y1", y1)
+            .attr("x2", x2)
+            .attr("y2", y2)
+            .style("stroke", color)
+    }
+
+    // 添加路径
+    path(id, d, color) {
+        workSpace.primaryCanvas.append("path")
+            .attr("id", id)
+            .attr("d", d)
+            .style("stroke", color)
+    }
+}
+
+class Node extends Shape {
+    static workSpace = null;
+    constructor(workSpace) {
+        super(workSpace)
+    }
+
+    // 添加一个链表节点
+    addNode(id, x, y, width, height, text) {
+        var primaryCanvas = workSpace.primaryCanvas
+        primaryCanvas.append("rect")
+            .attr("id", id)
+            .attr("x", x)
+            .attr("y", y)
+            .attr("width", width)
+            .attr("height", height)
+            .style("fill", workSpace.settings.colorMap["fill"])
+            .style("stroke", workSpace.settings.colorMap["stroke"])
+        primaryCanvas.append("text")
+            .attr("id", id + "_text")
+            .attr("x", x)
+            .attr("y", y)
+            // .attr("x", x + width / 2)
+            // .attr("y", y + height / 2)
+            .text(text)
+            .style("fill", workSpace.settings.colorMap["text"])
+    }
+}

algorithm-visualization/assets/js/index.js

@@ -0,0 +1,44 @@
+
+// 全局变量
+var settings = {
+    container: d3.select("#container"),
+    width: 1000,
+    height: 1000,
+    colorMap: {
+        "background": "#ddd",
+
+        "stroke": "#e02433",    // 边框颜色
+        "fill": "#ffa4ab",      // 填充颜色
+        "text": "blue",         // 文本颜色
+
+        "red": "#f00",
+        "green": "#0f0",
+    }
+}
+
+// 初始化
+var workSpace = new WorkSpace(settings)
+var node = new Node(workSpace)
+
+function initialize() {
+
+}
+
+initialize()
+
+// 测试
+node.rectangle("ele1", 10, 10, "20%", "30%", "blue", "red")
+node.circle("ele2", 200, 50, "20px", "green", "red")
+node.text("ele3", 200, 150, "文本", "red")
+node.line("ele4", 100, 100, 200, 200, "red")
+
+var line_generator = d3.line()
+    .x(function (d, i) { return i; })
+    .y(function (d, i) { return d; })
+
+node.path("ele5", line_generator([1, 3, 5, 7, 3, 5, 9]), "red")
+
+node.addNode("ele5", 250, 250, "20px", "20px", "文本")
+
+// // 添加 g 元素
+// primaryCanvas.append("g")

algorithm-visualization/index.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>小墨 | 算法可视化 | Algorithm Visualization</title>
+
+    <link rel="stylesheet" href="./assets/css/index.css">
+</head>
+
+<body>
+    <div class="main">
+        <div id="container" class="container">
+            正在加载中，请稍候...
+        </div>
+        <!-- <div class="header">
+            <h1>小墨 | 算法可视化</h1>
+        </div>
+        <div class="content">
+            <div class="content-left">
+                <div class="content-left-header">
+                    <h2>算法可视化</h2>
+                </div>
+                <div class="content-left-body">
+                    <ul>
+                        <li><a href="">算法可视化</a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="content-right">
+                <div class="content-right-header">
+                    <h2>算法可视化</h2>
+                </div>
+                <div class="content-right-body">
+                    <div class="content-right-body-header">
+                        <h3>算法可视化</h3>
+                    </div>
+                    <div class="content-right-body-body">
+                        <div id="container" class="container">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="footer">
+            <p>
+                <a href="">算法可视化</a>
+            </p>
+        </div> -->
+    </div>
+
+    <!-- D3.js refer: https://d3js.org/ -->
+    <script src="./assets/lib/d3/7.4.4/d3.js"></script>
+
+    <!-- class -->
+    <script src="./assets/js/class.js"></script>
+
+    <script src="./assets/js/index.js"></script>
+</body>
+
+</html>