Почему бары не реагируют? График D3. js

Question

Я сделал этот код, но столбцы не реагируют, только строки Y и X реагируют.

var data = [
    { Year: '1995', Total: 1000 },
    { Year: '2005', Total: 1035 },
    ...
];

Это данные и:

var colors = d3.hsl("steelblue");

let margin = { top: 30, right: 20, bottom: 30, left: 50 },
    width, // width gets defined below
    height = 500 - margin.top - margin.bottom;

width = parseInt(d3.select('#main').style('width'), 10) - margin.left - margin.right;

var xScale = d3.scaleBand();
var yScale = d3.scaleLinear().range([height, 0]);

var xAxis = d3.axisBottom().scale(xScale);
var yAxis = d3.axisLeft().scale(yScale);

var svg = d3.select("#main")
    .append("div")
    .classed("svg-div", true)
    .append("svg")
    .attr("height", height + margin.top + margin.bottom)
    .classed("svg-content", true);

var artboard = svg.append("g")
    .attr("viewBox", "0 0 300 " + (height + margin.top + margin.bottom))
    .attr("preserveAspectRatio", "xMinYMin meet")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var xScale = d3.scaleBand()
    .domain(data.map(function (d) { return d.Year }))
    .range([0, width])
    .padding(.2);
yScale.domain([
    d3.min(data, function (d) { return Math.floor(d.Total - 200); }),
    d3.max(data, function (d) { return Math.floor(d.Total + 200); })
]);

var xAxisEl = artboard.append("g")
    .attr("transform", "translate(0," + height + ")");
var yAxisEl = artboard.append("g")
    .call(yAxis);

var rectGrp = svg.append('g')
    .attr("viewBox", [0, 0, width, height])
    .attr("preserveAspectRatio", "none")
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

над прямоугольником (столбцы)

rectGrp.selectAll('rect')
    .data(data)
    .enter()
    .append('rect')
    .attr('width', (d, i) => {
        return xScale.bandwidth(d.Year) - margin.right;
    })
    .attr('height', function (d, i) {
        return height - yScale(d.Total);
    })
    .attr('x', function (d, i) {
        return xScale(d.Year);
    })
    .attr('y', function (d, i) {
        return yScale(d.Total)
    })
    .attr('fill', function (d, i) {
        return colors;
    });

Это функция для изменения размера svg .

function setChart() {
    width = parseInt(d3.select('#main').style('width'), 10) - margin.left - margin.right;

    svg.attr("width", width + margin.left + margin.right);

    xScale.range([0, width])
        .padding(.2);

    xAxis.scale(xScale);

    xAxisEl.call(xAxis);

};

Здесь я вызываю функцию.

setChart();

window.addEventListener('resize', setChart);

Это код, я бы хотел, чтобы столбцы реагировали как svg. Но это не работа.