如何控制堆积的条形图中x轴标签位置的间距？

Question

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

但是，我得到以下输出，其中x轴刻度线每次都向右移动，就像它们的间隙不匹配条形。

Answer 1

以下代码片段显示了矩形和轴的刻度线如何正确对齐。

需要特别注意d3.range如何生成数组，因为d3.range（1993，2002）将创建[1993，1994，...，2001]。

此外，我不确定为什么将包含X轴的g元素向左移动，因此将其设置为0

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>

Answer 2

我没有足够的S.O来“评论”，但我认为使用xScale可能会有所帮助： -在xAxis中（类似... xAxis = d3.axisBottom（）         .scale（xScale） ） -在每个小节的x位置（类似...   'x'，d => xScale（年） ） -在每个条的宽度中，似乎您可能需要使用类似... （'width'，x.bandwidth（））

看起来（1）轴和（2）栏中的xScale不能一起正常工作。 也许有帮助吗？！