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

D3-堆积条形图,位置条形图

d3.js angular

ttmt · 技术社区 · 6 年前

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

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的内置函数正确定位条

2 回复 | 直到 6 年前

rioV8 6 年前

你必须把每个月的带宽分成两条

.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());
})

Shashank 6 年前

当你使用 d3.scaleBand() 对于x刻度,可以使用 band_bandwidth 设置条形图的宽度。

x 基于日期定位条。

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

考虑到上述变化:

希望这有帮助。

推荐文章

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

4 月前

user3472810 · Angular@Output/EventEmitter返回undefined

4 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

4 月前

Jihed Ben Zarb · 造型角材料日期选择器

5 月前

st_clair_clarke · 为angular v19资源API创建可重复使用的加载器,其中包含2个不同类型的请求参数

6 月前

Ajay Kulkarni · Angular 19-重新路由到子路由未按预期工作

6 月前

Ajay Kulkarni · 路由器与导航上的路线不匹配

6 月前

Jace Johnson · Typescript文件读取的变量类型错误

6 月前

Ole · Angular资源API是否支持为资源添加初始值?

6 月前

Ole · 在使用新的Angular Resource API时取消搜索术语?

6 月前