Error: Custom Visual

thank you v-viig! this works great except for:

bars.attr({
    width: xScale.rangeBand(),
    height: d => height - yScale(<number>d.value),
    y: d => yScale(<number>d.value),
    x: d => xScale(d.category),
    fill: d => d.color,
    'fill-opacity': viewModel.settings.generalView.opacity / 100
});

since I'm using d3 v4 I cannot use .rangeBand doesn't work. I tried changing it to v4 format, but I am still getting the same error:

'Error' message: 'Argument of type '{ width: number; height: (d: any) => number; y: (d: any) => number; x: (d: any) => number; fill: ...' is not assignable to parameter of type 'string'.'

I am also having issues with the 'fill-opacity'. my code:

        public update(options: VisualUpdateOptions) {
            let width = options.viewport.width;
            let height = options.viewport.height;
            let margin = { top: 0, bottom: 25, let: 0, right: 0 };

            let viewModel: BarChartViewModel = this.vm =visualTransform(options, this.host)

            this.svg.attr({
                width: width,
                height: height
            } as any);

            if(viewModel.settings.enableAxis.show)
                height -= margin.bottom;

            let yScale = d3.scaleLinear()
                .domain([0, viewModel.dataMax])
                .range([height, 0]);

            let xScale = d3.scaleBand()
                .domain(viewModel.dataPoints.map(d => d.category))
                .rangeRound([0, width]);

            let xAxis = d3.axisBottom(xScale);

            this.xAxis.attr('transform', 'translate(0' + height + ')')
                .call(xAxis);

            let bars = this.barContainer.selectAll('.bar').data(viewModel.dataPoints);

            bars.enter()
                .append('rect')
                .classed('bar', true)

            bars.attr({
                width: xScale.bandwidth(),
                height: d => height - yScale(<number>d.value),
                y: d => yScale(<number>d.value),
                x: d => xScale(d.category),
                fill: d => d.color,
                'fill-opacity': viewModel.settings.generalView.opacity / 100

            });

            let selectionManager = this.selectionManager

            bars.on('click', function (d) {
                selectionManager.select(d.selectionId).then((ids: ISelectionId[]) => {
                    bars.attr({
                        'fill-opacity': ids.length > 0 ? 0.5 : 1
                    });

                    d3.select(this).attr({
                        'fill-opacity': 1
                    });
                });

                (<Event>d3.event).stopPropagation();
            })

            bars.exit()
                .remove();
        }