Rotated x-axis labels cut off in d3.js barchart

Question

I have a bar chart in d3.js. The text of the x-axis labels were too long and overlapping each other so I rotated the x-axis text by adding the following 4 attributes to x axis text:

      .selectAll("text")  
            .style("text-anchor", "end")
            .attr("dx", "-.8em")
            .attr("dy", ".15em")
            .attr("transform", "rotate(-65)" );

The problem is that the height of the space allocated to the x-axis labels did not expand so now I am only seeing the last few characters of the labels. How can I expand the space allocated to the x-axis labels so that it extends to show all the rotated text?

Here's is the complete d3.js code:

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);

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

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

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

var svg = d3.select("body").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 + ")");

d3.csv("segmentcount.csv", type, function(error, data) {
  if (error) throw error;

  x.domain(data.map(function(d) { return d.name; }));
  y.domain([0, d3.max(data, function(d) { return d.count; })]);

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
      .selectAll("text")  
            .style("text-anchor", "end")
            .attr("dx", "-.8em")
            .attr("dy", ".15em")
            .attr("transform", "rotate(-65)" );

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Count");

  svg.selectAll(".bar")
      .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.name); })
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.count); })
      .attr("height", function(d) { return height - y(d.count); })
      .style('fill', function(d) { return '#' + d.colour } );
});

Thanks very much!

Answer 1

Find the maximum label height, and translate the x axis accordingly. (Because the labels are rotated we compare the label widths).

Code snippet to illustrate:

 <html> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> <script> var margin = {top: 20, right: 20, bottom: 30, left: 40}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var x = d3.scale.ordinal() .rangeRoundBands([0, width], .1); var xAxis = d3.svg.axis() .scale(x) .orient("bottom"); var data = [ {name: "long name", count: 20}, {name: "name", count: 30}, {name: "even longer name", count: 10}, {name: "long name 4", count: 6}, {name: "long name 5", count: 17}, {name: "long name 6", count: 30}, {name: "long name 7", count: 45}]; var svg = d3.select("body").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 + ")"); x.domain(data.map(function (d) { return d.name; })); var gXAxis = svg.append("g") .attr("class", "x axis") .call(xAxis); gXAxis.selectAll("text") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", "rotate(-65)"); // Find the maxLabel height, adjust the height accordingly and transform the x axis. var maxWidth = 0; gXAxis.selectAll("text").each(function () { var boxWidth = this.getBBox().width; if (boxWidth > maxWidth) maxWidth = boxWidth; }); height = height - maxWidth; gXAxis.attr("transform", "translate(0," + height + ")"); var y = d3.scale.linear() .range([height, 0]); y.domain([0, d3.max(data, function (d) { return d.count; })]); var yAxis = d3.svg.axis() .scale(y) .orient("left"); svg.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("Count"); svg.selectAll(".bar") .data(data) .enter().append("rect") .attr("class", "bar") .attr("x", function (d) { return x(d.name); }) .attr("width", x.rangeBand()) .attr("y", function (d) { return y(d.count); }) .attr("height", function (d) { return height - y(d.count); }) .style('fill', "blue"); </script> </body> </html>

Rotated x-axis labels cut off in d3.js barchart

Question

1 answers

solution1
2 ACCPTED 2015-09-12 22:17:09

Rotated x-axis labels cut off in d3.js barchart

Question

1 answers

solution1 2 ACCPTED 2015-09-12 22:17:09

solution1
2 ACCPTED 2015-09-12 22:17:09