d3js：為tickPadding提供函數

Question

假設我有一個圖，其中x軸刻度標簽是很長的字符串 ，所以我想交替使用刻度線填充（文本和x軸之間的垂直距離），以使刻度標簽不重疊。

我知道可以通過選擇tick元素並應用transform屬性來實現后期渲染。 但我想這樣做：

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只需要像素數。 有一個更好的方法嗎？ 猴子補丁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

Answer 2

我也希望這樣做。 我用的是周數，所以有點局促。 基本上x軸看起來像

111213141516171819 

我希望將它們堆疊起來。 我最終這樣做了

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

一旦繪制圖形。 我確保在底部也包括一些額外的邊距（10）。 結果是

  12  14  16  18
11  13  15  17  19

Answer 3

您唯一的選擇是修改源。 D3在整個軸實現中tickPadding假定tickPadding是一個數字，而不是一個函數-參見源代碼 。