时间戳

首页 > 解决方案 > 向 d3 底轴添加高度或填充

javascript - 向 d3 底轴添加高度或填充

问题描述

我试图用 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 轴？

标签： javascriptcssd3.js

解决方案

在此处调整边距：-

 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);

推荐阅读