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 的建议.

每次当我call(axis)时，我也会调整文本标签.
这是简化的代码:

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);
}

更新:
顺便说一句，这是我结束的 日历演示:http://bl.ocks.org/oluckyman/6199145

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