mirror of
https://gitee.com/coder-xiaomo/algorithm-visualization
synced 2025-11-04 15:43:10 +08:00
基本结构
This commit is contained in:
37
README.md
Normal file
37
README.md
Normal file
@@ -0,0 +1,37 @@
|
||||
|
||||
|
||||
# 数据结构可视化
|
||||
|
||||
|
||||
|
||||
### 基本框架
|
||||
|
||||
|
||||
|
||||
SVG 过渡动画
|
||||
|
||||
|
||||
|
||||
时间轴
|
||||
|
||||
|
||||
|
||||
基本思路
|
||||
|
||||
> 用户输入排序序列，然后首先js生成排序步骤。界面上显示排序顺序，同时生成每一帧中每个元素的详细位置（引入帧的概念）。
|
||||
>
|
||||
> 因为有帧的概念，所以可以实现进度条，进度条可以调整到任意一帧，css动画缓动到对应的位置。
|
||||
|
||||
|
||||
|
||||
基本方法
|
||||
|
||||
```
|
||||
创建画布
|
||||
|
||||
创建元素
|
||||
改变元素位置，强调，大小，颜色，文本等
|
||||
|
||||
元素缓动
|
||||
```
|
||||
|
||||
21
algorithm-visualization/assets/css/index.css
Normal file
21
algorithm-visualization/assets/css/index.css
Normal file
@@ -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;
|
||||
}
|
||||
124
algorithm-visualization/assets/js/class.js
Normal file
124
algorithm-visualization/assets/js/class.js
Normal file
@@ -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"])
|
||||
}
|
||||
}
|
||||
44
algorithm-visualization/assets/js/index.js
Normal file
44
algorithm-visualization/assets/js/index.js
Normal file
@@ -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")
|
||||
20375
algorithm-visualization/assets/lib/d3/7.4.4/d3.js
vendored
Normal file
20375
algorithm-visualization/assets/lib/d3/7.4.4/d3.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
2
algorithm-visualization/assets/lib/d3/7.4.4/d3.min.js
vendored
Normal file
2
algorithm-visualization/assets/lib/d3/7.4.4/d3.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
63
algorithm-visualization/index.html
Normal file
63
algorithm-visualization/index.html
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user