如何避免 d3 条形图截断 x 轴？

问：

我正在处理一个问题，试图使用 div 中的视图框绘制 d3 条形图。问题在于 x 轴标签不适合视图框尺寸，并且它们看起来被截断。只有当我将高度的视图框增加到 Chrome 开发人员控制台标签时才适合。

我的代码：

const width = 1152;
const height = 700;
const marginTop = 100;
const marginRight = 0;
const marginBottom = 30;
const marginLeft = 100;

var svg = d3.select("#divAccesos")
.append("svg")
.attr("viewBox", [0, 0, width, height]);

// Add axes
svg.append("g")
.attr("class", "x axis")  
.attr("transform", `translate(0,${height - marginBottom})`)
.call(d3.axisBottom(xScale))
.selectAll("text")  
            .style("text-anchor", "end")
            .attr("dx", "-.8em")
            .attr("dy", ".15em")
            .attr("font-size", "1.6em")
            .attr("transform", "rotate(-65)" );

包含 viewbox 的 div 是这样的：

<div id="divAccesos" align="center" style="position:relative; width:80%; overflow: visible; padding-top:4vh; height: 900px;"> 
</div>

有什么想法可以解决这个问题吗？提前非常感谢！:-)

[使用解决方案更新]关键是增加 marginBottom，以便为 x 轴标签腾出空间，保持相同的高度值。

const width = 1152;
const height = 600;
const marginTop = 100;
const marginRight = 0;
const marginBottom = 200; // before it was 30
const marginLeft = 100;