Question

我正在使用D3在Angular中创建一个堆积的条形图。

x轴为月，每个月都有两个堆叠的条形图。

我不知道如何使用D3的功能将条形图放置在x轴上，因此我将条形图数除以宽度来定位它们。

.attr('width', (this.width/this.data.length)-2)

.attr('x', (d:any, i:any)=>{
    return (i * this.width/this.data.length);
})

这种工作方式，但是月份刻度应位于月份的每个小节之间，但此功能已关闭。

如何使用D3的内置功能正确放置钢筋

Answer 1

您必须每月将带宽分成2个条形

.attr('width', this.x.bandwidth()*0.95*0.5 )
.attr('x', (d:any, i:any)=>{
    return (this.x(d.data.date) + (i%2) * 0.525 * this.x.bandwidth());
})

Answer 2

当您使用d3.scaleBand()作为x缩放比例时，可以使用band_bandwidth设置条形的宽度。

相关更改：

x基于日期的条的位置。

.attr('x', (d:any, i:any)=>{
    return this.x(d.data.date);
})

考虑上述变化的叉子：

希望这会有所帮助。