使用d3排列刻度文本的最佳方法

Question

默认情况下，当我使用D3设置刻度时，文本与行重叠如下：

我知道有两种方法可以解决这个问题，但两者都存在缺陷。最简单的方法是添加如下内容：

transform(0 -20px)

到文本元素的css。这里的问题是浏览器兼容性。与浏览器兼容的做法是：

d3.selectAll('text').attr('transform','translate(0,-20)')

问题是这不适用于动态比例;该函数必须在附加文本元素后运行，因此它与过渡更新刻度尺不兼容。

Answer 1

您可以使用tickPadding。 调用轴的示例，填充为20：

    axis.call(d3.svg.axis()
    .scale(y)
    .tickSize(0)
    .tickPadding(20) )