NVD3堆积面积图 - xAxis日期和工具提示日期格式

Question

我认为interactiveGuideline标题日期格式会继承相同的xAxis tick格式，但我在制作这些排队时遇到了一些麻烦。

我希望两者都有d3.time.format（'％b-％y'）但是在我将xAxis tickFormat设置为％b-％y之后，工具提示提供了一年中不同的日期。

我尝试自定义工具提示标题，只有在我首先将原始xAxis tickFormat设置为d3.time.format（'％x'）时才有效。我对此比较陌生，所以我确定我在这里缺少一些简单的东西。我对此表示感谢。

以下是代码和JSfiddle：https://jsfiddle.net/timothymartin76/vmg75kzb/2/

        var histcatexplong = [
    {
        "key" : "Fully Automated" ,
        "values" : [ [ 1406937600000 , 4905] , 
        [ 1409616000000 , 4583] , 
        [ 1412208000000 , 5276] , 
        [ 1414886400000 , 6300] , 
        [ 1417478400000 , 4684] , 
        [ 1420156800000 , 15129] , 
        [ 1422835200000 , 11186] , 
        [ 1425254400000 , 8555] , 
        [ 1427932800000 , 4866] , 
        [ 1430524800000 , 6080] , 
        [ 1433203200000 , 5729] , 
        [ 1435795200000 , 5467] , 
        [ 1438473600000 , 3800] , 
        [ 1441152000000 , 4345]]
    } ,

     {
        "key" : "Partially Automated" ,
        "values" : [ [ 1406937600000 , 638] , 
        [ 1409616000000 , 379] , 
        [ 1412208000000 , 684] , 
        [ 1414886400000 , 934] , 
        [ 1417478400000 , 509] , 
        [ 1420156800000 , 399] , 
        [ 1422835200000 , 329] , 
        [ 1425254400000 , 340] , 
        [ 1427932800000 , 0] , 
        [ 1430524800000 , 0] , 
        [ 1433203200000 , 0] , 
        [ 1435795200000 , 0] , 
        [ 1438473600000 , 0] , 
        [ 1441152000000 , 0]]
    } ,

     {
        "key" : "Fully Aided" ,
        "values" : [ [ 1406937600000 , 5018] , 
        [ 1409616000000 , 4848] , 
        [ 1412208000000 , 5441] , 
        [ 1414886400000 , 6822] , 
        [ 1417478400000 , 5353] , 
        [ 1420156800000 , 14625] , 
        [ 1422835200000 , 11084] , 
        [ 1425254400000 , 8812] , 
        [ 1427932800000 , 5855] , 
        [ 1430524800000 , 7245] , 
        [ 1433203200000 , 7505] , 
        [ 1435795200000 , 8417] , 
        [ 1438473600000 , 6245] , 
        [ 1441152000000 , 6312]]


    }
];

var colors = d3.scale.category20();

var chart;
nv.addGraph(function() {
    chart = nv.models.stackedAreaChart()
        .useInteractiveGuideline(true)
        .x(function(d) { return d[0] })
        .y(function(d) { return d[1] })
        .controlLabels({stacked: "Stacked"})
        //.yDomain([0,35000])
        .duration(300);


    chart.xAxis
        .ticks(12)
        .tickFormat(function(d) { return d3.time.format('%b-%y')(new Date(d)) });

    chart.xScale(d3.time.scale());  


    chart.yAxis
        .ticks(8)
        .tickFormat(d3.format(','));

        //Example of how to customize the tooltip.
    chart.interactiveLayer
        .tooltip
        .headerFormatter(function(d) {return "Date: " + d3.time.format('%b-%y')(new Date(d));})
        //.valueFormatter(d3.format(',.2f'));

    chart.legend.vers('furious');

    d3.select('#chart1')
        .datum(histcatexplong)
        .transition().duration(1000)
        .call(chart)
        .each('start', function() {
            setTimeout(function() {
                d3.selectAll('#chart1 *').each(function() {
                    if(this.__transition__)
                        this.__transition__.duration = 1;
                })
            }, 0)
        });

    nv.utils.windowResize(chart.update);    
    return chart;
});