javascript - d3js : supply a function to tickPadding

Question

假设我有 a graph where the x-axis tick labels are very long strings ，所以我想交替填充刻度(文本和 x 轴之间的垂直距离)，以便刻度标签不重叠。

我知道这可以通过选择刻度元素并应用变换属性来实现后渲染。但我想这样做:

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;
 });

这在 d3 中不起作用——文档 ( https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-tickPadding ) 说 tickPadding 只需要像素数。有一个更好的方法吗？ Monkey 补丁 d3 的 axis.tickPadding 函数获取一个函数或一个数字，然后在绘制刻度时应用该函数？

Answer 1

有关源代码补丁，请参阅:

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

另一种解决方法是在呈现后手动换行文本:

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

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