d3.js：在轴上的刻度线之间对齐文本标签 [英] d3.js: Align text labels between ticks on the axis

问题描述

有一个简单的方法来对齐文本标签之间的刻度线？

Is there an easy way to align text labels between ticks?

这是我的时间轴，标记在刻度线上方：

Here is my time axis with labels above the ticks:

我想这样放置这些标签：

I would like to place these labels like here:

推荐答案

我结束了其中一个 Lars Kotthoff的建议。

每当我调用（轴）时，我也会调整文本标签。

是简化的代码：

Every time when I call(axis) I also adjust text labels.
Here is simplified code:

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

这篇关于d3.js：在轴上的刻度线之间对齐文本标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！