title: Row chart puts zero at center when no data
body: <p>I am creating row chart using dc.js in angular, but the chart is not aligned properly. See the screenshot below:</p>
  <p><img src="https://i.stack.imgur.com/Azq3b.png" alt="  image  " /></p>
  <pre>
      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'];
        });
  </pre>