d3js：为tickPadding提供函数

Question

Say I have a graph where the x-axis tick labels are very long strings , and so I want to alternate the tick padding (the vertical distance between the text and the x-axis) so that the tick labels don't overlap.

I know this can be achieved post-rendering by selecting the tick elements and applying a transform attribute. But I'd like to do:

var xAxis = d3.svg.axis()
.scale(x0)
.orient("bottom")
.tickSize(0)
.tickPadding(function(i) {
  // some logic here to determine the alternating-height strategy by index, e.g.
  return i % 2 ? 20 : 30;
 });

This doesn't work in d3 as-is -- the documentation ( https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-tickPadding ) says that tickPadding just takes the number of pixels. Is there a better way to do this? Monkey patch d3's axis.tickPadding function to take a function or a number, then apply the function when drawing the ticks?

Answer 1

For the source-code patch, see:

https://github.com/adonomay/d3/commit/bfdb36fa17806666775c6804b86eb10bea3b3393

An alternate fix is to wrap the text manually after rendering:

https://github.com/mbostock/d3/issues/1641

http://bl.ocks.org/mbostock/7555321

Answer 2

I also was hoping to do this. I was using week numbers and it got a little cramped. Basically the x axis looked like

111213141516171819 

and I was hoping to stack them. I ended up doing this

$('.tick text').each(function(i){
   var yval = this.getAttribute("y");
   if( i % 2 == 0 )this.setAttribute("y",parseInt(yval)+10);
});

Once the graph was drawn. I made sure to include some extra margin (10) on the bottom as well. The result was

  12  14  16  18
11  13  15  17  19

Answer 3

The only choice you have is to modify the source. D3 assumes throughout the axis implementation that tickPadding is a number, not a function -- see the source .