D3 - Уложенная гистограмма, позиционные столбцы

Question 1

У меня есть stackbiltz здесь - https://stackblitz.com/edit/d3-stacked-trend-bar-v5eyxx?file=src/app/bar-chart.ts

Я создавая сложную гистограмму в Angular с помощью D3.

Ось x - это месяцы, а в каждом месяце есть две гистограммы.

Я не знал, как установить положение столбцов на x оси, используя функции D3, поэтому я позиционировал их, деля количество баров по ширине.

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

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

Этот вид работ, но тиковый месяц, должен быть между каждой полосой месяца, но это выключено. [ ! d5]

Как правильно расположить столбцы, используя встроенные функции D3

Question 2

Поскольку вы используете d3.scaleBand() для шкалы x, вы можете использовать band_bandwidth для установки ширины баров.

Соответствующие изменения:

Полоса пропускания к полосам:

.attr('width', this.x.bandwidth())

x позиционирование баров в зависимости от даты.

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

Вилка, рассматривающая вышеупомянутые изменения:

Надеюсь, это поможет.

Shashank · Answer 1 · 15 August 2018 в 16:58