修改class调用方式，一些小调整

algorithm-visualization/assets/css/index.css

@@ -12,10 +12,9 @@ body,
 }
 
 #container {
-  /* background-color: #ddd; */
   border: 1px solid #999;
   border-radius: 5px;
   box-shadow: 0 0 5px #999;
-  width: 700px;
+  /* width: 700px; */
-  height: 350px;
+  /* height: 350px; */
 }

algorithm-visualization/assets/js/class.js

@@ -14,7 +14,12 @@ class WorkSpace {
         this.settings = settings
 
         // 清除原有内容
-        settings.container.html("");
+        settings.container
+            .style("width", settings.width)
+            .style("height", settings.height)
+            // .attr("width", settings.width)
+            // .attr("height", settings.height)
+            .html("")
 
         // 创建工作区SVG
         this.primaryCanvas = settings.container.append("svg")
@@ -42,10 +47,14 @@ class Shape {
         this.workSpace = workSpace
     }
 
-    // 添加矩形
+    addShape(shape, id) {
-    rectangle(id, x, y, width, height, fillColor, strokeColor) {
+        return workSpace.primaryCanvas.append(shape)
-        workSpace.primaryCanvas.append("rect")
             .attr("id", id)
+    }
+
+    // 添加矩形
+    rectangle(id, { x, y, width, height, fillColor = "white", strokeColor = "black" }) {
+        return this.addShape("rect", id)
             .attr("x", x)
             .attr("y", y)
             .attr("width", width)
@@ -55,9 +64,8 @@ class Shape {
     }
 
     // 添加圆形
-    circle(id, x, y, radius, fillColor, strokeColor) {
+    circle(id, { x, y, radius, fillColor = "white", strokeColor = "black" }) {
-        workSpace.primaryCanvas.append("circle")
+        return this.addShape("circle", id)
-            .attr("id", id)
             .attr("cx", x)
             .attr("cy", y)
             .attr("r", radius)
@@ -66,54 +74,43 @@ class Shape {
     }
 
     // 添加文本
-    text(id, x, y, text, color) {
+    text(id, { x, y, text, fillColor }) {
-        workSpace.primaryCanvas.append("text")
+        return this.addShape("text", id)
-            .attr("id", id)
             .attr("x", x)
             .attr("y", y)
             .text(text)
-            .style("fill", color)
+            .style("fill", fillColor)
     }
 
     // 添加线
-    line(id, x1, y1, x2, y2, color) {
+    line(id, { x1, y1, x2, y2, strokeColor }) {
-        workSpace.primaryCanvas.append("line")
+        return this.addShape("line", id)
-            .attr("id", id)
             .attr("x1", x1)
             .attr("y1", y1)
             .attr("x2", x2)
             .attr("y2", y2)
-            .style("stroke", color)
+            .style("stroke", strokeColor)
     }
 
     // 添加路径
-    path(id, d, color) {
+    path(id,d,  { fillColor = "white", strokeColor = "black" }) {
-        workSpace.primaryCanvas.append("path")
+        return this.addShape("path", id)
-            .attr("id", id)
             .attr("d", d)
-            .style("stroke", color)
+            .style("fill", fillColor)
-    }
+            .style("stroke", strokeColor)
-}
-
-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")
+        primaryCanvas.append("rect", id)
-            .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")
+        primaryCanvas.append("text", id + "_text")
-            .attr("id", id + "_text")
             .attr("x", x)
             .attr("y", y)
             // .attr("x", x + width / 2)

algorithm-visualization/assets/js/index.js

@@ -2,8 +2,22 @@
 // 全局变量
 var settings = {
     container: d3.select("#container"),
-    width: 1000,
+    outerSize: {    // 不带单位
-    height: 1000,
+        width: 800,
+        height: 600
+    },
+    innerSize: {    // 不带单位，通过 outerSize 和 margin 计算得到
+        width: null,
+        height: null
+    },
+    width: null,    // 带单位，通过 outerSize 计算得到
+    height: null,   // 带单位，通过 outerSize 计算得到
+    margin: {
+        top: 20,
+        right: 20,
+        bottom: 20,
+        left: 20
+    },
     colorMap: {
         "background": "#ddd",
 
@@ -16,9 +30,14 @@ var settings = {
     }
 }
 
+settings.width = settings.outerSize.width + "px";
+settings.height = settings.outerSize.height + "px";
+settings.innerSize.width = settings.outerSize.width - settings.margin.left - settings.margin.right;
+settings.innerSize.height = settings.outerSize.height - settings.margin.top - settings.margin.bottom;
+
 // 初始化
 var workSpace = new WorkSpace(settings)
-var node = new Node(workSpace)
+var shape = new Shape(workSpace)
 
 function initialize() {
 
@@ -27,18 +46,60 @@ function initialize() {
 initialize()
 
 // 测试
-node.rectangle("ele1", 10, 10, "20%", "30%", "blue", "red")
+shape.rectangle("ele1", {
-node.circle("ele2", 200, 50, "20px", "green", "red")
+    x: 10,
-node.text("ele3", 200, 150, "文本", "red")
+    y: 10,
-node.line("ele4", 100, 100, 200, 200, "red")
+    width: "20%",
+    height: "30%",
+    fillColor: "blue",
+    strokeColor: "red"
+}).style("stroke-width", "10px")
+shape.circle("ele2", {
+    x: 200,
+    y: 50,
+    radius: "20px",
+    fillColor: "green",
+    strokeColor: "red"
+})
+shape.text("ele3", {
+    x: 200,
+    y: 150,
+    text: "文本",
+    fillColor: "red"
+})
+shape.line("ele4", {
+    x1: 100,
+    y1: 100,
+    x2: 200,
+    y2: 200,
+    strokeColor: "red"
+})
 
+var data = [1, 3, 5, 7, 3, 5, 9]
+var scale = {
+    x: d3.scaleLinear()
+        .domain([0, data.length - 1])
+        .range([0, settings.innerSize.width]),
+    y: d3.scaleLinear()
+        .domain([0, d3.max(data)])
+        .range([0, settings.innerSize.height])
+}
 var line_generator = d3.line()
-    .x(function (d, i) { return i; })
+    .x(function (d, i) { return scale.x(i); })
-    .y(function (d, i) { return d; })
+    .y(function (d, i) { return scale.y(d); })
+// .curve(d3.curveBasis)
+// .curve(d3.curveCardinal)
 
-node.path("ele5", line_generator([1, 3, 5, 7, 3, 5, 9]), "red")
+shape.path("ele5", line_generator(data), {
+    fillColor: "none",
+    strokeColor: "red"
+})
+shape.path("ele5", line_generator.curve(d3.curveCardinal)(data), {
+    fillColor: "none",
+    strokeColor: "green"
+})
 
-node.addNode("ele5", 250, 250, "20px", "20px", "文本")
+shape.addNode("ele5", 300, 200, "20px", "20px", "文本")
 
 // // 添加 g 元素
 // primaryCanvas.append("g")