Javascript HTML元素'；s宽度在D3动画中无限增加

我试图用Fournier变换来可视化音频流。我有Python的背景，在DOM中遇到这个问题之前一直进展顺利。这是最奇怪的情况，当我在寻找解决方案时，我甚至不知道如何描述它

我当然希望能够调整容器的大小，使其具有良好的响应UI，但是，我不确定为什么在运行动画时，div

容器会无限扩展。我很确定这与
append
之间的差异有关，而我想覆盖。我试图尽可能地锁定宽度，并将X范围移出主函数，希望能够阻止任何无意的连接，但这并没有解决问题。阵列的长度保持在16，所以我不确定宽度是如何变化的。我试图确保信息只从
containerWidth
var中流出，而不是被推入其中

在下面的代码中，有人能解释所描述的行为吗？我需要更改代码的哪些内容来修复问题

const audioContainer = document.getElementById('audioContainer');

function draw() {
    frameEngine();
    requestAnimationFrame(draw);
}

function getXVariables(data) {
    const containerWidth = audioContainer.offsetWidth;
    const XrangeStep = containerWidth / data.length;
    const new_df = Array.from({ length: data.length - 1 }, (v, k) => k * XrangeStep);
    new_df.push(containerWidth);
    console.log(`X Range Step : ${XrangeStep} length ${new_df.length} width: ${containerWidth}`);
    return new_df;
}

function frameEngine() {
    const containerWidth = audioContainer.offsetWidth;
    const containerHeight = audioContainer.offsetHeight;

    const Y = new Uint8Array(analyser.frequencyBinCount); // array init
    analyser.getByteFrequencyData(Y); // populate array with Frequence Data
    const X = getXVariables(Y);

    const arr = [X, Y];
    const df = arr[0].map((_, colIndex) => arr.map((row) => row[colIndex]));

    var svg = d3
        .select('#audioContainer')
        .append('svg')
        .attr('width', containerWidth)
        .attr('height', containerHeight);

    svg.data(df).enter();

    var line = d3
        .line()
        .x(function x(d) {
            return d[0];
        })
        .y(function y(d) {
            return d[1];
        });

    svg.append('path').attr('fill', 'none').attr('stroke', 'black').attr('d', line(df));
}

draw()

.container {
    border: 3px solid black;
    display: flex;
    position: relative;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

您尝试使用css设置最大宽度？