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

Question

我正在处理一个问题，试图使用 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>

有办法解决这个问题吗？预先非常感谢您！ :-)

Answer 1

viewBox 属性（所有属性都是如此）需要一个字符串。您正在传递一个数组。

var svg = d3.select("#divAccesos")
.append("svg")
.attr("viewBox", `0, 0, ${width}, ${height}`);