Maximum width for column in bar chart

Question

I'm looking for a way of limiting the column width in a chart, I'm sure this ought to be relatively easy but I cant find a way of doing it.

I'm populating a chart from some dynamic data, where the number of columns can vary quite dramatically - between 1 and 20.

e.g: sample of csv

Location,Col1
"Your house",20

Location,Col1,Col2,Col3,Col4,Col5
"My House",12,5,23,1,5

This is working fine, and the col widths are dynamic, however when there is only one column in the data, I end up with one bar of width 756 (the whole chart), and I dont like the way this looks.

What I'd like to do is only ever have a maximum column of width 100px irrespective of the number of columns of data.

Below is my script for the chart

Many thanks,

<script>
var margin = {
    top : 40,
    right : 80,
    bottom : 80,
    left : 40
}, 
width = 960 - margin.left - margin.right, 
height = 500 - margin.top - margin.bottom;

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

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

var x0 = d3.scale.ordinal()
    .rangeRoundBands([0, width], .05);

var x1 = d3.scale.ordinal();

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

var chart = d3.select("body").append("svg")
    .attr("class","chart")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var legendChart = d3.select("body").append("svg")
    .attr("class","chart")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


d3.csv("/sampledata.csv.txt", function(error, data) {
    // Use the first row of csv for header names 
    var reasonNames = d3.keys(data[0]).filter(function(key) {
        return key !== "Location";
    });
    //console.log(reasonNames);

    data.forEach(function(d) {
        d.reasons = reasonNames.map(function(name) {
            return {
                name : name,
                value : +d[name]
            };
        });
        //console.log(d.reasons);
    });

    x0.domain(data.map(function(d) {return d.Location; }));
    x1.domain(reasonNames).rangeRoundBands([0, x0.rangeBand()]);

    console.log(x0.rangeBand());

    y.domain([0, d3.max(data, function(d) { return d3.max(d.reasons, function(d) { return d.value; }); })]);

    var maxVal = d3.max(data, function(d) { return d3.max(d.reasons, function(d) { return d.value; }); });
    //console.log(maxVal);

    var xAxis = d3.svg.axis()
        .scale(x0)
        .orient("bottom");

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left")
        //.tickFormat(d3.format(".2s"));

    chart.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    chart.append("g")
        .attr("class", "y axis")
        .call(yAxis);

    var location = chart.selectAll(".name")
        .data(data)
      .enter().append("g")
        .attr("class", "g")
        .attr("transform", function(d) { return "translate(" + x0(d.Location) + ",0)"; });

    location.selectAll("rect")
        .data(function(d) { return d.reasons; })
      .enter().append("rect")
        .attr("width", x1.rangeBand()-2)
        .attr("x", function(d) { return x1(d.name); })
        .attr("y", function(d) { return y(d.value); })
        .attr("height", function(d) { return height - y(d.value); })
        .style("fill", function(d,i) { return "#"+3+"9"+i; /*color(d.name);*/ });

    chart.selectAll("text")
        .data(data)
      .enter().append("text")
        .attr("x", function(d) { return x1(d.name)+ x.rangeBand() / 2; })
        .attr("y", function(d) { return y(d.value); })
        .attr("dx", -3) // padding-right
        .attr("dy", ".35em") // vertical-align: middle
        .attr("text-anchor", "end") // text-align: right
        .text("String");

    var legend = legendChart.selectAll(".legend")
        .data(reasonNames.slice().reverse())
        .enter()
        .append("g")
        .attr("class", "legend")
        .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")";
    });

    legend.append("rect")
        //.attr("x", width - 18)
        .attr("x", 18)
        .attr("width", 18)
        .attr("height", 18)
        .style("fill", function(d, i) {/*console.log(i);*/return "#" + 3 + "9" + i;
    });

    legend.append("text")
        //.attr("x", width - 24)
        .attr("x", 48)
        .attr("y", 9).attr("dy",".35em")
        //.style("text-anchor", "end")
        //.text(function(d,i) { return String.fromCharCode((65+i))+i; });
        .text(function(d) { return d; });
    });


</script>

Answer 1

The easiest way to achieve this is by changing the line

.attr("width", x1.rangeBand()-2)

to

.attr("width", Math.min(x1.rangeBand()-2, 100))

You might also want to adjust the starting position and/or padding.

Answer 2

Code for adjusting starting position if anyone is stuck on it:

.attr("x", function(d, i) { return x1(d.seriesName) + (x1.rangeBand() - 100)/2 ;})

P.S. : referring answer from Lars.