d3.js:在轴上的刻度之间对齐文本标签

Question

是否有一种简单的方法可以在刻度线之间对齐文本标签？

这是我的时间轴,标签上方有标签:

我想像这里放置这些标签:

Answer 1

我最终得到了Lars Kotthoff的一条建议.

每当call(axis)我还调整文字标签时.
这是简化的代码:

function renderAxis() {
    axisContainer
        .transition().duration(300)
        .call(axis)                  // draw the standart d3 axis
        .call(adjustTextLabels);     // adjusts text labels on the axis 
}

function adjustTextLabels(selection) {
    selection.selectAll('.major text')
        .attr('transform', 'translate(' + daysToPixels(1) / 2 + ',0)');
}

// calculate the width of the days in the timeScale
function daysToPixels(days, timeScale) {
    var d1 = new Date();
    timeScale || (timeScale = Global.timeScale);
    return timeScale(d3.time.day.offset(d1, days)) - timeScale(d1);
}

更新:
BTW,这是我最终的日历演示:http://bl.ocks.org/oluckyman/6199145

Answer 2

没有简单(即内置)的方法,但你仍然可以实现它.有几个选择.最直接的一种可能是使用该tickFormat函数来指定在数字前面/后面有适当数量空格的格式.这需要针对每个应用程序进行手动调整.

或者,您可以在绘制后选择标签元素,并添加相应的transform属性以相应地移动它们.同样,这必须手动调整.

您的第三个选择是有两个不同的轴,一个用于刻度线,另一个用于标签.这个想法是提供刻度线的轴没有标签而另一个没有刻度线.您需要适当地设置刻度值,但至少您不必猜测正确的偏移量.