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

如何控制堆叠条形图中X轴标签位置的间距?

d3.js

-1

SkyWalker · 技术社区 · 6 年前

this 和 this 解决。

然后,我做如下显示我的X轴标签蜱:

var x = d3.scaleBand().range([0, width]).padding(.1).domain(d3.range(1993, 2002));
svg.append("g")
   .attr('class', 'axis')
   .attr('transform', 'translate(-10,' + (height - 20) + ')')
   .call(d3.axisBottom(x));

2 回复 | 直到 6 年前

Tom Shanley 6 年前

下面的片段显示了Rects和Acess的TIKE是如何正确排列的。

需要注意d3.range如何生成数组,在这个d3.range(1993,2002)将创建[1993,1994。。。,2001年]。

var width = 800
    var height = 100
    
    //this makes an array 1993 to 2001. Is that what you want?
    var data = d3.range(1993, 2002) 
     
    var x = d3.scaleBand()
    	.range([0, width])
    	.padding(.1)
    	.domain(data);

    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
    
    svg.append("g")
       	.attr('class', 'axis')
       //.attr('transform', 'translate(-10,' + (height - 20) + ')')
    		.attr('transform', 'translate(0,' + (height - 20) + ')')
       	.call(d3.axisBottom(x));
     
    svg.selectAll('rect')
    	.data(data)
    	.enter()
    	.append('rect')
    	.attr('x', d => x(d))
    	.attr('y', 0)
    	.attr('width', x.bandwidth())
    	.attr('height', x.bandwidth())

<script src="https://d3js.org/d3.v4.min.js"></script>

Jake 6 年前

我没有足够的S.O来“评论”,但我认为使用xScale可能会有帮助: -在XXIS(像……) .刻度(X刻度) ) “x”,d=>x刻度(年) ) (“宽度”,x.bandwidth())

看起来像(1)轴和(2)条中的XSCOPE不能一起工作。也许这有帮助?!

推荐文章

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

2 年前

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

2 年前

user6456564 · 双条形图创建

6 年前

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

6 年前

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

6 年前

MTT · 最适合散点图的回归

6 年前

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

6 年前

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

6 年前

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

6 年前

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

6 年前