为d3底轴添加高度或填充

Question

我试图用d3和Vue.js制作一个图，但我的X轴有问题，我似乎无法添加填充或高度。

这是我的示例代码：

this.graph.g
.select('.axes-wrapper')
.append('g')
.attr('class', 'axis axis-x')
.style('font-size', '15px')
.attr('transform',`translate(0,${this.graph.height})`)
.attr('x', this.graph.width / 2)
.call(d3.axisBottom(this.graph.x).ticks(10).tickFormat(d3.timeFormat('%d %b %y')))
.selectAll('text')
.attr('transform', 'rotate(-45)')
.attr('x', -20)
.attr('y', 10);

我遇到的问题是，当我将字体大小设置为15px并将文本旋转45度时，它会出现在图形之外，而且因为我有溢出：隐藏在svg元素上，所以它不可见。但我不能将溢出设置为可见，因为这会给我带来其他问题，所以有什么方法可以设置X轴的高度或添加底部填充吗？？

Answer 1

在此调整边距：-

var  margin = { top: 10, right: 30, bottom: 50, left: 20 };
var svg = d3.select('#some-id').append('svg')
.attr('width', 500 + margin.right + margin.left)
.attr('height', 500 + margin.top + margin.bottom);