Dc.js序数条形图差距

Question

我的条形图有一个间隙，其中一半的条位于x轴和y轴之间，我尝试通过在开始和结束处放置空白数据来修复此问题，这使得条形图不在轴的中间位置，但Y轴和X轴之间仍然存在难以捉摸的间隙。我想要一种方法将Y轴单独向右移动，使其与X轴相遇或找到一种方法来移除间隙而不放空白数据。要么现在好了。

快乐调试！

function InitPieChart(strings, selectedCity) {
    // cities.forEach(function(city){
    if (selectedCity == "") {
        DataForPieGraph = [{
            Name: "",
            data: 0
        }];
        strings.forEach(function(string) {
            cities.forEach(function(city) {
                DataForPieGraph.push({
                    Name: string,
                    data: (test.SumHelper(Projectsall, city, string))
                });
            })
        })
    }
    DataForPieGraph.push({
        Name: " ",
        data: 0
    });
    console.log(DataForPieGraph);
    var ndx = crossfilter(DataForPieGraph),
        nameDim = ndx.dimension(function(d) {
            return d.Name;
        }),
        spendPerName = nameDim.group().reduceSum(function(d) {
            return +d.data;
        });

    // CityChart
    //  .width(200).height(176)
    //   .dimension(nameDim)
    //   .group(spendPerName)
    //   .innerRadius(30)

    //   .label(function(d) { return d.data.value})
    //   .legend(dc.legend().x(0).y(0).itemHeight(13).gap(5));
    //   CityChart.render()

    // cities.forEach(function(city){
    ProjectChart
        .width(768)
        .elasticX(true)
        .xAxisPadding(50)
        .centerBar(true)
        // .margins({top: 10, right: 50, bottom: 00, left: -10})
        .height(380)
        .x(d3.scale.ordinal().domain(["", "Active", "Pending", "Value.Visits", " "]))
        .xUnits(dc.units.ordinal)
        .brushOn(false)
        .yAxisLabel('Amount')
        .dimension(nameDim)
        .colors(["#097DBC", "#049FD9", "#C4D6ED"])
        .colorAccessor(function(d, i) {
            return i;
        })
        .xAxisPadding(50)
        // .colors(d3.scale.ordinal().domain(["Active Projects", "Pending Projects","Visits"])
        // .range(["#097DBC","#049FD9","#64BBE3"]))
        // .barPadding(0.1)
        // .outerPadding(0.05)

    .group(spendPerName);
    ProjectChart.render();
    ProjectChart.renderlet(function(chart) {

        var barsData = [];
        var bars = chart.selectAll('.bar').each(function(d) {
            barsData.push(d);
        });

        //Remove old values (if found)
        d3.select(bars[0][0].parentNode).select('#inline-labels').remove();
        //Create group for labels 
        var gLabels = d3.select(bars[0][0].parentNode).append('g').attr('id', 'inline-labels');

        for (var i = bars[0].length - 1; i >= 0; i--) {

            var b = bars[0][i];
            //Only create label if bar height is tall enough
            if (+b.getAttribute('height') < 18 && +b.getAttribute('height') != 0) {

                gLabels
                    .append("text")
                    .text(barsData[i].data.value)
                    .attr('x', +b.getAttribute('x') + (b.getAttribute('width') / 2))
                    .attr('y', +b.getAttribute('y') - 1)
                    .attr('text-anchor', 'middle')
                    .attr('fill', 'black');
            } else if (+b.getAttribute('height') != 0) {
                gLabels
                    .append("text")
                    .text(barsData[i].data.value)
                    .attr('x', +b.getAttribute('x') + (b.getAttribute('width') / 2))
                    .attr('y', +b.getAttribute('y') + 18)
                    .attr('text-anchor', 'middle')
                    .attr('fill', 'black');
            }
        }

    })
}

What the graph looks like when it is displayed