Question

假设我有a graph where the x-axis tick labels are very long strings，所以我想要替换刻度线填充（文本和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是一个数字，而不是函数 - 请参阅the source。

d3js：为tickPadding提供一个函数

3 个答案: