根据数据动态调整d3.js条形图的大小

Question

我正在构建一组条形图，这些条形图将使用json数据动态更新。

有时x.domain值等于零或null，所以在这些情况下我不想绘制矩形，并希望调整图表的整体高度。但是，条形图是基于data.length绘制的，它可能包含9个数组值，但其中一些值为零，但在图形中呈现一个空白区域。

我附上了正在发生的事情的图像。基本上有9个数据条目，其中只有一个实际包含正值，但仍然为所有9个点绘制条形。

这是我的代码：

d3.json("data/sample.json", function(json) {

var data = json.cand;

var margin = {
    top: 10,
    right: 20,
    bottom: 30,
    left: 0
}, width = parseInt(d3.select('#graphic').style('width'), 10),
width = width - margin.left - margin.right -50,
bar_height = 55,
num_bars = (data.length),
bar_gap = 18,
height = ((bar_height + bar_gap) * num_bars);

var x = d3.scale.linear()
.range([0, width]);

var y = d3.scale.ordinal()
.range([height, 0]);

var svg = d3.select('#graphic').append('svg')
    .attr('width', width + margin['left'] + margin['right'])
    .attr('height', height + margin['top'] + margin['bottom'])
    .append('g')
    .attr('transform', 'translate(' + margin['left'] + ',' + margin['top'] + ')');

     var dx = width;
     var dy = (height / data.length) + 8;


// set y domain
x.domain([0, d3.max(data, function(d) {
    return d.receipts;
})]);
y.domain(0, d3.max(data.length))
    .rangeBands([0, data.length * bar_height ]);

var xAxis = d3.svg.axis().scale(x).ticks(2)
    .tickFormat(function(d) {
        return '$' + formatValue(d);
    });

var yAxis = d3.svg.axis()
    .scale(y)
    .orient('left')
    .ticks(0)
    .tickFormat(function(d) {
        return '';
    });
// set height based on data
height = y.rangeExtent()[1] +12;
d3.select(svg.node().parentNode)
    .style('height', (height + margin.top + margin.bottom) + 'px');

// bars
var bars = svg.selectAll(".bar")
    .data (data, function (d) {
    if (d.receipts >= 1) {
            return ".bar";
        } else {
            return null;
        }
    })
    .enter().append('g');

bars.append('rect')
    .attr("x", function(d, i) {
        return 0;
    })
    .attr("y", function(d, i) {
        if (d.receipts >= 1) {
        return i * (bar_height + bar_gap - 4);
        }else {
            return null;
        }
    })
    .attr("width", function(d, i) {
    if (d.receipts >= 1) {
            return dx * d.receipts;
        } else {
            return 0;
        }
    });



//y and x axis

svg.append('g')
    .attr('class', 'x axis bottom')
    .attr('transform', 'translate(0,' + height + ')')
    .call(xAxis.orient('bottom'));

svg.append('g')
    .call(yAxis.orient('left'));

});