避免在d3js轴重复日期 [英] Avoid duplicate dates in d3js axes

问题描述

我有很多图表是动态生成的。对于某些图表，日期彼此接近，因此轴标签正在重复。

I have many charts being generated dynamically. For some charts, the dates are near each other, so, axis labels are getting repeated

示例：

使用的日期格式：

d3.time.format("%d-%b-%y")

是否有内置的方法来避免重复的标签？还是有一个很好的通用程序，可以避免这样的重复？
请注意，我的图表也有缩放功能，传入的数据是动态的，所以我不能输入硬编码的值ticks或tickValues。

Is there an in-built way to avoid duplication of labels? Or is there a good generic procedure which can avoid such duplication? Note that my charts have zooming feature also and the incoming data is dynamic, so I can't put in hardcoded values of "ticks" or "tickValues". Generating ticks or tickValues dynamically, could be the way to go.

推荐答案

感谢@Lars Kotthoff帮助。这是基本的解决方案：

Thank you @Lars Kotthoff for helping out. This is the basic solution:

var ticks = scale.ticks(userSpecifiedTicks);
var nonDuplicateTickValues = [];

var tickAlreadyExists = function(tickValIn)
{
    for(var i=0;i<nonDuplicateTickValues.length;i++)
    {
        var t = nonDuplicateTickValues[i];
        var formattedTickValIn = formatter(tickValIn);
        var formattedTickVal = formatter(t);
        if(formattedTickValIn == formattedTickVal)
            {return true;}

    }
    return false;
};

var removeDuplicateTicks = function()
{
    for(var i=0;i<ticks.length;i++)
    { 
        var tickVal = ticks[i];
        if(!tickAlreadyExists(tickVal))
        {
            nonDuplicateTickValues.push(tickVal);
        }
    }
};

scale.tickValues(nonDuplicateTickValues);

这里，格式化程序可以是任何函数：

Here, formatter could be any function like:

var formatter = function(d){
    var format = d3.time.format("%d-%b-%y");
    return format(d);
}

这篇关于避免在d3js轴重复日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！