避免 d3js 轴中的重复日期答案

【问题标题】：Avoid duplicate dates in d3js axes避免 d3js 轴中的重复日期
【发布时间】：2015-01-02 12:48:49
【问题描述】：

我有许多动态生成的图表。对于某些图表，日期彼此靠近，因此轴标签会重复

例子：

使用的日期格式：

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

是否有避免标签重复的内置方法？还是有一个很好的通用程序可以避免这种重复？请注意，我的图表也具有缩放功能，并且传入的数据是动态的，因此我不能输入“ticks”或“tickValues”的硬编码值。动态生成刻度或刻度值，可能是要走的路。

【问题讨论】：

使用multi-scale time format。
我不确定是否允许我以这种方式显示日期。您认为在绘制图表和缩放图表后执行后处理步骤并删除所有重复的刻度是个好主意吗？
另一个选项是使用.tickValues() 手动设置刻度。那么就不需要后处理了。
是的，但是由于数据是动态的并且变化很大：从整个图表的 2 天间隔到几年的间隔，我需要一个通用算法。可以是自定义时间刻度，域为日期，范围为图表维度，并将图表维度划分为指定编号的相等部分。刻度数，然后获取日期值，然后拒绝重复，然后将它们指定为刻度值？
您可以简单地使用刻度的.tick() 函数来获取刻度，然后删除重复项。

标签： d3.js charts axis-labels

【解决方案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)，您将得到一个字符串数组作为输出，因此请根据需要进行修改。

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

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

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

【讨论】：

【解决方案2】：

感谢@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);
}

【讨论】：