X-axis label misplaced

Question

In my NVD3 chart here, I rotated and translated the X-axis ticks. As a result, the X-axis label My X-axis got affected too.

JS:

    var xTicks = d3.select('.nv-x.nv-axis > g').selectAll('g');

    xTicks
      .selectAll('text')
      .attr('transform', function(d,i,j) { 
          return 'translate (-10, 40) rotate(-90 0,0)';
       )}

How do I modify this code to skip formatting the X-axis label?

jsFiddle

score 1 · Accepted Answer · answered Jul 02 '14 at 09:01

1

You had selected all the text elements earlier to be transformed. Select only the tick labels.

Try the below

xTicks.selectAll('g > .tick > text').attr('transform', function(d, i, j) {
    return 'translate (-10, 40) rotate(-90 0,0)'
});

// Bring the 'My X-Axis' label down to avoid overlap.
xTicks.select('.nv-axislabel').attr("y", 90)

Hope it helps

answered Jul 02 '14 at 09:01

shabeer90

5,161
4
47
65

That worked like a charm! But now the problem is that the X-axis label is getting behind the ticks: http://jsfiddle.net/rdesai/vfe2B/29/ How do I move it downward? – Rahul Desai Jul 02 '14 at 09:55
Ah, missed that! Could you help me with this followup question? http://stackoverflow.com/questions/24523744/nvd3-chart-partly-missing-grid-lines – Rahul Desai Jul 02 '14 at 10:03

X-axis label misplaced

1 Answers1