避免在d3js轴重复日期(Avoid duplicate dates in d3js axes)

我有被动态生成多个图表。 对于一些图表，日期彼此接近，因此，轴越来越重复的标签

例：

使用日期格式：

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

是否有一个内置的方式，以避免标签的重复？ 或者是有这样可以避免重复这样一个良好的通用程序？ 请注意，我的图表也放大变焦功能和输入的数据是动态的，所以我不能把在“滴答”或“tickValues”的硬编码值。 生成蜱或tickValues动态，可能是要走的路。

Answer 1:

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

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

在这里，格式化也能像任何函数：

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

Answer 2:

您也可以使用这些方法来从一个数组得到不同的值。

1. d3.set().values()

输入： _.map(d3.set([1,2,3,3,4,5,5]).values(), function(d) { return +d; });

输出： [1, 2, 3, 4, 5]

如果没有_.map(array, function)你会得到的字符串作为输出的一个数组，所以修改为需要的话。

2. onlyUnique(value, index, self) { return self.indexOf(value) === index; }

输入： [1,2,3,3,4,5,5].filter(onlyUnique);

输出： [1, 2, 3, 4, 5]

文章来源: Avoid duplicate dates in d3js axes