d3 rangeRoundBands Padding

Question

Another d3 question here...

I am reworking the bar chart I finished building because I had so many components and so many redundant transitions due to my improper use of the each() method that the performance was really terrible...which kinda defeats the purpose of using it in the first place!

But in any case, I have been closely following mbostock's stacked bar graph tutorial, but have run into an issue trying to pad my bars from each other.

The relevant code is below:

var barWidth = (2.7*chartWidth)/(3.7*array.length - 1);
    //font size for bar labels
    var barNumberSize = (16.0 / 27) * barWidth;
    //font size for bubbles
    var bubbleNumberSize = (12.0 / 27) * barWidth;
    var barPadding = barWidth / 2.7;
    var maxBarHeight = chartHeight;
    var bubbleRadius = barWidth / 2;

    // create the svg object for the whole graphic
    var svg = d3.select('body')
        .append('svg')
        .attr('class','graphic')
        .attr('width', svgWidth)
        .attr('height', svgHeight)

    //create the section for the bar chart itself
    var chart = svg.append("g")
        .attr('width', chartWidth)
        .attr('height', chartHeight)
        .attr('class', 'chart')
        //make room for axes, etc.
        .attr('transform', 'translate(' + chartPaddingX + ',' + (chartHeight - chartPaddingY) + ')');

var x = d3.scale.ordinal()
        .rangeRoundBands([0,chartWidth],10),
    y = d3.scale.linear()
        .range([0, maxBarHeight]),
    z = d3.scale.ordinal().range(['rgb(41,41,41)','rgb(238,77,77)'])
    parse = d3.time.format("%m/%y").parse,
    format = d3.time.format("%b");

var results = d3.layout.stack()(["without","with"].map(function(result) {
    return array.map(function(d) {
        return {x:parse(d.date) , y:d[result]};
    });
}));

x.domain(results[0].map(function(d) { return d.x; }));
y.domain([0, d3.max(results[results.length - 1], function(d) { return d.y0 + d.y; })]);

var result = chart.selectAll("g.result")
    .data(results)
    .enter().append("svg:g")
    .attr("class", "result")
    .style("fill", function(d, i) { return z(i); })
    .style("stroke", function(d, i) { return z(i) });

var rect = result.selectAll("rect")
    .data(Object)
    .enter().append("svg:rect")
    .attr("x", function(d) { return x(d.x); })
    .attr("y", function(d) { return - y(d.y0) - y(d.y); })
    .attr("height", function(d) { return y(d.y); })
    .attr("width", x.rangeBand());

My issue is that this line

var x = d3.scale.ordinal()
       .rangeRoundBands([0,chartWidth]),

works fine, while this line (setting the bars' padding as 10px)

var x = d3.scale.ordinal()
       .rangeRoundBands([0,chartWidth],10),

causes all my bars to disappear. An inspection with firebug reveals that, somehow, the width of all the bars changes to -180px (instead of 30px) when I set a value for padding.

I can't seem to figure out where this bug is stemming from...any help would be much appreciated!

Answer 1

Working example: http://tributary.io/inlet/5816972

The issue is that the padding value neds to be in the range [0,1]. This number corresponds to the fraction of space allocated to each bar that will be replaced with padding. Source: https://github.com/mbostock/d3/wiki/Ordinal-Scales#wiki-ordinal_rangeBands