2

Good afternoon.

I ask you how to solve the problem with xAxis labels when the data is huge (overlapping layers) and you indicate me the insertion of a new lines (*), althought I have a probleme in my slipt function.

Someone have a soggestion for this problem.

My chart: http://jsfiddle.net/superboggly/tL2hW/

Solution:

var insertLinebreaks = function (d) {
  var el = d3.select(this);
  var words = d.split(' ');
  el.text('');

  for (var i = 0; i < words.length; i++) {
    var tspan = el.append('tspan').text(words[i]);
    if (i > 0)
        tspan.attr('x', 0).attr('dy', '15');
  }
};

svg.selectAll('g.x.axis g text').each(insertLinebreaks);
Community
  • 1
  • 1
user2920033
  • 123
  • 1
  • 11

1 Answers1

1

I would suggest using this solution: http://www.d3noob.org/2013/01/how-to-rotate-text-labels-for-x-axis-of.html

Rotating the labels of the x-axis works until you have a way too large amount of bars. If the number of bars is too high I would suggest re-thinking the table since it will not be easy for anyone to see. There are guidelines to this if you google information visualization.

To have a general label for the unit of the axis rotated to be horizontal, use 

.attr("transform", "rotate(-XX)")

on the specific text element XX degrees.

dansv130
  • 317
  • 1
  • 3
  • 12
  • Thanks this solution fit perfectly with my problem. I only have a doubt, how I can insert the xAxis name with this tipology. With the normal xAxis I use this: .append("text") .attr("x", width) .attr("dy", 30) .attr("text-anchor", "end") .text("Generation"); But with totate lablesit does not work. – user2920033 Jan 21 '14 at 14:19
  • You can use .attr("transform", "rotate(-XX)") to rotate each text element XX degrees. So do what you do and add the transform rotate and you should be all set! – dansv130 Jan 22 '14 at 07:54