使用bootstrap +d3.js。条形图未显示

Question

HTML

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-1">
            <h2><i class="fas fa-chevron-left vertical-center"></i></h2>
        </div>
        <div class="col-sm-10">
            <div class="row">
                <p>Name</p>
            </div>
            <div class="row">
                <center>
                    <div id="chart"></div>
                </center>
            </div>
        </div>
        <div class="col-sm-1">
            <h2><i class="fas fa-chevron-right vertical-center"></i></h2>
        </div>
    </div>
</div>

d3.js

        var dataObj = []

        for (let i = 0; i < 1; i++) {
            dataObj[i] = {
                potenial: 5 + i,
                actual: 12 + (2 * i),
                latest: 9 + (i)
            }
        }

        console.log(dataObj)

        // Create variable for the SVG
        var svg = d3.select("#chart").append("svg")
                .attr("height",'100%')
                .attr("width",'100%');

        // Select, append to SVG, and add attributes to rectangles for bar chart
        svg.selectAll(".bar")
            .data(dataObj)
            .enter().append("rect")
                .attr("class", "bar")
                .attr("height", function(d, i) {return (d.actual * 10)})
                .attr("width","60")
                .attr("x", function(d, i) {return (i * 80) + 25})
                .attr("y", function(d, i) {return 400 - (d.actual * 10)});

样式

<style>

    .vertical-center {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    .container-fluid {
        height: 100%;
    }
    .row {
        height: 100%;
    }
    i {
        color: silver;
    }
    i:hover {
        color: #333;
    }
</style>

我同时使用了bootstrap和d3.js来添加一个显示叠加条形图的窗口。当我尝试加载此文件时，图表未显示。但是当我检查元素时，它存在。

这很奇怪，因为当我尝试不使用引导程序使用它时，它就会显示出来。

我在做什么错了？