import webpack

src/assets/js/index.js

@@ -0,0 +1,166 @@
+
+// 全局变量
+var settings = {
+    container: d3.select("#container"),
+    outerSize: {    // 不带单位
+        width: 800,
+        height: 600
+    },
+    innerSize: {    // 不带单位，通过 outerSize 和 margin 计算得到
+        width: null,
+        height: null
+    },
+    width: null,    // 带单位，通过 outerSize 计算得到
+    height: null,   // 带单位，通过 outerSize 计算得到
+    margin: {       // 不带单位
+        top: 180,
+        right: 20,
+        bottom: 180,
+        left: 20
+    },
+    oneUnit: {      // 不带单位，通过 innerSize 计算得到
+        transverse: null,   // 横向单位长度 ( innerSize 的 1% )
+        longitudinal: null  // 纵向单位长度 ( innerSize 的 1% )
+    },
+    colorMap: {
+        "background": "#ddd",
+
+        "stroke": "#e02433",        // 边框颜色
+        "fill": "#ffa4ab",          // 填充颜色
+        "fill_focus": "#ee737d",    // 填充颜色
+        "text": "blue",             // 文本颜色
+        "text_focus": "white",      // 文本颜色
+
+        "red": "#f00",
+        "green": "#0f0",
+    },
+    animation: {
+        duration: 2000,  // 不带单位，单位是毫秒
+        easing: "ease-in-out"
+    }
+}
+
+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;
+settings.oneUnit.transverse = settings.innerSize.width / 100;
+settings.oneUnit.longitudinal = settings.innerSize.height / 100;
+
+console.log("settings", settings)
+
+// 初始化
+var workSpace = new WorkSpace(settings)
+var shape = new Shape(workSpace)
+var animation = new VectorAnimation(workSpace)
+
+function initialize() {
+    var elementId = "ele8"
+    d3.select("#btn_qucikSort").on("click", function () {
+        // 快速排序算法
+        var sortAlgorithm = new QuickSort(animation)
+        sortAlgorithm.doSortWithAnimation(elementId)
+    })
+    d3.select("#btn_bubbleSort").on("click", function () {
+        // 冒泡排序算法
+        var sortAlgorithm = new BubbleSort(animation)
+        sortAlgorithm.doSortWithAnimation(elementId)
+    })
+}
+
+initialize()
+
+// 临时输出
+function updateConsole(data) {
+    document.getElementById("console-div").innerHTML = data
+}
+
+// 测试
+// shape.rectangle("ele1", {
+//     x: 10,
+//     y: 10,
+//     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 = []
+// for (let i = 0; i < 20; i++) // 生成随机数
+//     data.push(Math.ceil(Math.random() * 10))
+
+// var scale = {
+//     x: d3.scaleLinear()
+//         .domain([0, data.length - 1])
+//         .range([0, settings.innerSize.width]),
+//     y: d3.scaleLinear()
+//         .domain([0, d3.max(data)])
+//         .range([settings.innerSize.height, 0])
+// }
+// var line_generator = d3.line()
+//     .x(function (d, i) { return scale.x(i); })
+//     .y(function (d, i) { return scale.y(d); })
+// // .curve(d3.curveBasis)
+// // .curve(d3.curveCardinal)
+
+// shape.path("ele5", line_generator(data), {
+//     fillColor: "none",
+//     strokeColor: "red"
+// })
+// shape.path("ele6", line_generator.curve(d3.curveCardinal)(data), {
+//     fillColor: "none",
+//     strokeColor: "green"
+// })
+// // shape.addShape("g", "axisX").attr("transform", `translate(${settings.margin.left}, ${settings.outerSize.height - settings.margin.bottom})`)//.attr("fill", "red")
+// shape.axis("axisX", {
+//     transform: `translate(${settings.margin.left}, ${settings.outerSize.height - settings.margin.bottom})`,
+//     axis: d3.axisBottom(scale.x)
+// })
+// shape.axis("axisY", {
+//     transform: `translate(${settings.margin.left}, ${settings.margin.top})`,
+//     axis: d3.axisLeft(scale.y)
+// })
+
+// shape.addNode("ele7", 300, 200, "20px", "20px", "文本")
+
+var listData = [47, 11, 50, 13, 16, 49, 8, 9, 38, 27, 20] // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
+let fragment = shape.getLinkedListFragment("ele8", listData, {
+    x: 100,
+    y: 100,
+    width: "100px",
+    height: "100px",
+})
+
+console.log(fragment)
+workSpace.primaryCanvas.node().appendChild(fragment)
+document.getElementById("ele8").customAttr = fragment.customAttr
+
+function getRandom(length) {
+    return Math.floor(Math.random() * length);    // 可均衡获取 0 到 length-1 的随机整数。
+}
+
+// for (let i = 0; i < 10; i++) {
+//     var id = "ele8"
+//     animation.swapLinkedListItems(id, [getRandom(listData.length), getRandom(listData.length)])
+// }
+