Row chart puts zero at center when no data - d3.js

Question

I am creating row chart using dc.js in angular, but the chart is not aligned properly. See the screenshot below:
var chartData=dc.rowChart(".div");
chartData
.width(900)
.x(d3.scaleLinear().domain([0, 20]))
.elasticX(true)
.colorAccessor(d => d.key)
.ordinalColors(this.mainColor)
.dimension(countryDimension)
.group(remove_empty_bins(countryGroup))
.margins({ top: 10, right: 120, bottom: 70, left: 30 })
.transitionDuration(500)
.renderLabel(true)
.label(function (d) {
return dc.utils.printSingleValue(d.x0 + d.x);
})
.renderlet(function (chart) {
chart.selectAll("g.x text")
.attr('font-size', '14px')
.attr('dy', '0px')
.attr('dx', '5px')
.attr('font-weight', '100px')
//.attr('transform', "rotate(35)")
.attr("text-anchor", "start")
.attr("text", "Data")
})
.renderlet(function (chart) {
chart.selectAll("g.x text")
.attr("transform", "translate(" + (650 / 2) + " ," +
(900 + 20 + 20) + ")")
.style("text-anchor", "middle")
.text("Data1");
})
.renderlet(function (chart) {
chart.selectAll("g.chart-body text").attr('dy', '15px')
.attr('dx', '0px')
.attr('z-index', '3')
.attr('font-size', '16px')
.attr('font-weight', '100px')
.attr("text-anchor", "start")
.text("Data")
})
.label(p => {
return p.key
})
.keyAccessor(function (d) {
return d.value['name'];
});
var ValueAccessor = chartData.valueAccessor(function (d) {
var count = 0;
var count1 = 0;
if (d.value['count'] > maxValue) {
maxValue = d.value['count'];
}
if (maxValue > 1) {
chartData.xAxis().ticks(4).tickFormat(d3.format("d"));
}
else {
chartData.xAxis().ticks(1).tickFormat(d3.format("d"));
}
return d.value['count'];
});