javascript - 放大时 D3 轴标签变得过于细粒度

Question

我正在尝试创建一个轴函数，其刻度/标签是动态的，这意味着它们会自动隐藏/显示。但最重要的是，我希望在某个缩放级别停止渲染更多刻度/标签。这是一个示例:首先，轴显示年份，然后当您放大时，刻度变为月份，当您进一步放大时，它显示天数(即，12 月 28 日)。除了我想限制 d3 以便当缩放比月份更远时，它不再呈现任何刻度，因为月份是我想要的最小单位。

我有几个例子，如果组合起来就是我想要的，但我不知道该怎么做。

此外:我添加了 .tickFormat，因为我想显示每个价格变动以具有缩写的月份格式。

示例 1: http://jsfiddle.net/GGYKL/

var xAxis = d3.svg.axis().scale(x)
    .tickFormat(d3.time.format('%b'))
    .orient("bottom");

此示例显示了在放大时刻度/标签如何正确显示和消失，但是当您继续放大时，它会拆分月份并开始重复月份刻度/标签，我不想限制用户缩放中。

示例 2: http://jsfiddle.net/4kz7t/

var xAxis = d3.svg.axis().scale(x)
    .ticks(d3.time.months)
    .tickFormat(d3.time.format('%b'))
    .orient("bottom"),

此示例解决了当您像我们在示例 1 中看到的那样继续放大时的问题，但它不会在缩放时动态隐藏/显示刻度/标签。

Answer 1

我遇到的最接近的答案是@Lars Kotthoff 建议的多尺度时间格式。我将自定义时间格式化程序编辑为:

http://jsfiddle.net/BdGv5/1/

var customTimeFormat = timeFormat([
    [d3.time.format("%Y"), function() { return true; }],
    [d3.time.format("%b"), function(d) { return d.getMonth(); }],
    [function(){return "";}, function(d) { return d.getDate() != 1; }]
]);

因此在放大时仍会生成刻度本身，但标签将为空字符串。

更新:

我最终创建了自己在 .ticks() 中使用的函数。 Ticks 将比例范围作为 t0 和 t1 传递给您的函数。我将图表宽度除以标签大小(和填充)以找到不重叠的最大标签数量，并使用下划线删除所有其他勾号(如果会发生重叠)。

http://jsfiddle.net/BdGv5/3/

function customTickFunction(t0, t1, dt)
    {

        var labelSize = 30; // largest label is 23 pixels ("May")
        var maxTotalLabels = Math.floor(width / labelSize);

        function step(date, offset)
        {
            date.setMonth(date.getMonth() + offset);
        }

        var time = d3.time.month.ceil(t0), times = [];

        while (time < t1) times.push(new Date(+time)), step(time, 1);

        if(times.length > maxTotalLabels)
            times = _.filter(times, function(d){
                return (d.getMonth() + 1) % 2;
            });

        return times;
    }

    var domain = xScale.domain();
    var xAxisMonthsFunction = d3.svg.axis().scale(xScale)
        .ticks(customTickFunction)
        .tickFormat(d3.time.format("%b"))
        .orient("bottom");

更新 2:

http://jsfiddle.net/BdGv5/5/

使滴答调整进一步超过 1 个级别，现在它有 4 个级别 (2,3,4,6)。

function customTickFunction(t0, t1, dt)
{

    var labelSize = 30; // largest label is 23 pixels ("May")
    var maxTotalLabels = Math.floor(width / labelSize);

    function step(date, offset)
    {
        date.setMonth(date.getMonth() + offset);
    }

    var time = d3.time.month.ceil(t0), times = [], monthFactors = [2,3,4,6];

    while (time < t1) times.push(new Date(+time)), step(time, 1);

    var i;
    for(i=1 ; times.length > maxTotalLabels ; i++)
        times = _.filter(times, function(d){
            return (d.getMonth()) % monthFactors[i] == 0;
        });

    return times;
}