代码之家 › 专栏 › 技术社区 › Loki

向d3底轴添加高度或填充

d3.js css javascript

Loki · 技术社区 · 6 年前

我试图用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轴添加底部填充??

1 回复 | 直到 6 年前

Mahi 6 年前

在此调整边距:

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

推荐文章

Eddie Worthington · D3.js指针相对于轴域的坐标

2 年前

b404 · 如何在d3 react typescript应用程序中正确设置“path”元素中属性“d”的类型

3 年前

user6456564 · 双条形图创建

7 年前

MetalCat · 在d3中,如何在地图上的鼠标上方显示多个值?

7 年前

atdyer · 使用svg变换更新位置时,力模拟会出现抖动

7 年前

MTT · 最适合散点图的回归

7 年前

Cyley Simon · 以chile/name格式将Csv转换为json

7 年前

Himani · 线图和面积图之间的颜色不同

7 年前

Francis Katalinic · d3。使用d3通过ajax响应实现JSJSON。json()

7 年前

user9646441 · 为什么这个svg和数组会在angular中多次启动?

7 年前