Динамическое изменение оси X на диаграммах D3 Гистограмма с накоплением

Question

Цель, над которой я работаю, состоит в том, чтобы ось X изменила свои отметки в зависимости от объема получаемых данных. У меня ось X работает отлично, но я изо всех сил пытаюсь отобразить столбцы с накоплением. Я все еще довольно новичок в d3, поэтому советы и исправления могут помочь. Я создал jsfiddle с примером.

В нижней части части скрипта javascript вы найдете два вызова функций. Первый использует набор данных с 11 точками данных. Второй вызов использует набор данных с гораздо большим количеством точек данных. Если существует 60 или менее дней (это точки данных), то на оси будет отображаться как день, так и начало месяца. При наличии более 60 дней график перестает отображать отдельные дни и начинает отображать только начало месяцев. Вы можете комментировать / раскомментировать их, чтобы увидеть разницу.

Я считаю, что проблема возникает в этой части кода:

layer.selectAll("rect")
    .data(function (d) { return d.data; })
    .enter().append("rect")
    .attr("x", function (d) { return x(d.x); })
    .attr("y", function (d) { return y(d.y + d.y0); })
    .attr("height", function (d) { return y(d.y0) - y(d.y + d.y0); })
    .attr("width", x.rangeBand());

Конкретно эта строка: .attr("width", x.rangeBand());,

Когда я вручную добавляю ширину, например, 1, тогда отображаются полосы. Но они не расположены правильно относительно оси x. Кажется, что я не могу понять, как заставить прямоугольники корректировать их правильный размер так, чтобы они все правильно помещались на своем месте.

Вот пример jsfiddle