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

У меня есть 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

1
задан ttmt 13 August 2018 в 13:16
поделиться

2 ответа

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

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

Полоса пропускания к полосам:
.attr('width', this.x.bandwidth())
x позиционирование баров в зависимости от даты.
.attr('x', (d:any, i:any)=>{
    return this.x(d.data.date);
})

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

band_bandwidth

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

0
ответ дан Shashank 15 August 2018 в 13:58
поделиться
  • 1
    Лол мой плохой. Я не правильно прочитал вопрос! Я просто пошел с scaleBand-bar-chart-center-ticks инстинктом. В любом случае, рад, что это разрешено! – Shashank 13 August 2018 в 15:19
Другие вопросы по тегам: