algorithm-visualization/src/assets/js/index.js

// 全局变量
var settings = {
    container: d3.select("#container"),
    debugMode: false,
    outerSize: {    // 不带单位
        width: 800,
        height: 450
    },
    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": "#8a0f19",          // 文本颜色
        "text_focus": "white",      // 文本颜色

        "red": "#f00",
        "green": "#0f0",
    },
    animation: {
        getConf: function () {  // gsap动画传入默认设置
            return {
                duration: 0.3,  // 单位是秒
                ease: "sine.inOut",
                delay: 0,
                yoyo: true,
            }
        }
    },
    console: {
        maxLine: -1,        // 最大输出的行数，超出后较早的记录将被丢掉  -1 表示不限制
        consoleList: [],    // 输出列表的数组，不要修改
    }
}

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;


// 初始化
var workSpace = new WorkSpace(settings)
var arrayVi = new ArrayVi(workSpace)
var shape = new Shape(workSpace)
var animation = new VectorAnimation(workSpace)

var elementId = "array-sort-algorithm"
arrayVi.initialize({ elementId: elementId })

document.getElementById("array-input").oninput = function () {
    arrayVi.updateListDataArray('array-sort-algorithm', { doNotAlert: true })
}
document.getElementById("getRandomBtn").onclick = function () {
    arrayVi.randomListDataArray(elementId)
}

// 输出
function consoleLog(data) {
    let consoleList = settings.console.consoleList
    if (data) {
        consoleList.push(data)
        if (settings.console.maxLine != -1 && consoleList.length > settings.console.maxLine + 1) {
            consoleList.shift()
            consoleList[0] = "<small>更早的记录已经被丢掉啦</small>"
        }
    }
    let consoleContainer = document.getElementById("console-logs")
    consoleContainer.innerHTML = consoleList.join("<br>")
    consoleContainer.scrollTop = container.scrollHeight
}
function consoleClear() {
    settings.console.consoleList = []
    consoleLog()
}

// 展示当前数组
function displayCurrentArray(array) {
    let dom = []
    for (let index = 0; index < array.length; index++) {
        const element = array[index];
        dom.push(`<span style="margin: 0 4px;">${element.toString()}</span>`)
    }
    document.getElementById("console-current-array").innerHTML = "当前数组：" + dom.join("&nbsp;")
}

// 测试
// 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", "文本")