Maximum width for column in bar chart

问题:

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>

回答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.

回答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.

回答3:

Setting an absolute maximum width for the columns doesn't allow proper rendering for different screen resolutions, div sizes, etc.

In my case, I just wanted the columns not to look so large when the number of columns itself is small I found it easier and more straight-forward to play with the scale definition, by changing the maximum width (where all columns will fit), their inner and outer paddings.

var w = 600
// var w = parseInt(d3.select(parentID).style('width'), 10) // retrieve the div width dynamically
var inner_padding = 0.1
var outer_padding = 0.8
var xScale = d3.scale.ordinal().rangeRoundBands([0, w], inner_padding, outer_padding)

When rendering the plot, I just ran a switch/if-else statement, which assigns different padding values. The lower the number of columns to plot, the greater the outer_padding (and eventually inner-padding) values I use.

This way, I keep the plots responsive.

回答4:

I am able to change the width of the bar using the above answer. But unfortunately, my X Axis labels are not aligned when there is a single bar in the chart and it uses the max width set.

var tradeGroup = svg.selectAll("g.trade")
            .data(trades)
            .enter()
            .append("svg:g")
            .attr("class", "trade")
            .style("fill", function (d, i) {
                return self.color(self.color.domain()[i]);
            })
            .style("stroke", function (d, i) {
                return d3.rgb(self.color(self.color.domain()[i])).darker();
            });

var aWidth = Math.min.apply(null, [x.rangeBand(), 100]);

// Add a rect for each date.
var rect = tradeGroup.selectAll("rect")
            .data(Object)
            .enter()
            .append("svg:rect")
            .attr("x", function (d) {                 
                return x(d.x);
            })
            .attr("y", function (d) { return y( (d.y || 0) + (d.y0 || 0)); })
            .attr("height", function (d) { return y(d.y0 || 0) - y((d.y || 0) + (d.y0 || 0)); })
            .attr("width", Math.min.apply(null, [x.rangeBand(), 100]));

回答5:

For completeness the full answer would look like this:

svg.selectAll(".bar")
  .data(data)
  .enter().append("rect")
  .attr("class", "bar")
  .attr("x", (d) -> x1(d.name) + (x1.rangeBand() - d3.min([x1.rangeBand(), 100]))/2)
  .attr("width", d3.min([x1.rangeBand(), 100]))
  .attr("y", (d) -> y(d.grade) )
  .attr("height", (d)-> height - y(d.value) )

(coffeescript syntax)

Note this include the full answer, the 'width' and the 'x' settings. Also 'x' settings is accounting for a when 100 width is not the min value.

回答6:

Thought I'd share that I came up with a slightly different answer to this. I didn't want to hard code in a maximum bar width because 1) it wasn't responsive to different screen sizes and 2) it also required playing with the x-coordinate attribute or accepting some irregular spacing.

Instead, I just set a minimum number of bars, based on the point where the bars became too wide (in my case, I found that less than 12 bars made my chart look weird). I then adjusted the scaleBand's range attribute, proportionately, if there were less than that number of bars. So, for example, if the minimum was set to 12 and there were only 5 items in the data, rather than rendering each of them at 1/5th of the full width, I scaled the range down to 5/12ths of the original width.

Basically, something like this:

// x is a scaleBand() that was previously defined, and this would run on update

var minBarSlots = 12;

if (data.length < minBarSlots) {
    x.range([0, width*(data.length/minBarSlots)])
}
else {
    x.range([0, width])
}`