nvd3 - 強制所有xaxis標籤顯示在折線圖上

Question

如何強制所有xAxis標籤顯示在我的圖形上，而無需通過.tickvalues定義每個勾號？

我完全是nvd3的新手，這是我的第一次嘗試。 也許有一個心地善良的人可以看看我的代碼並幫助我。 我做了我的研究，但沒有爲我工作。

這裏是我的代碼：

var data = [ 
    { 
"key": "www.WebsiteA.com", 
"values": [ 

{date:"20151221",rank:1}, 
{date:"20151222",rank:3}, 
{date:"20151223",rank:2}, 
{date:"20151224",rank:4}, 
{date:"20151225",rank:2}, 
{date:"20151226",rank:5}, 
{date:"20151227",rank:3}, 
{date:"20151228",rank:2}, 
{date:"20151229",rank:2}, 
{date:"20151230",rank:1}, 
{date:"20151231",rank:2}, 
{date:"20160101",rank:4}, 
{date:"20160102",rank:5}, 
{date:"20160103",rank:3}, 

] }, 


    { 
"key": "www.WebsiteB.com", 
"values": [ 

{date:"20151221",rank:2}, 
{date:"20151222",rank:1}, 
{date:"20151223",rank:3}, 
{date:"20151224",rank:5}, 
{date:"20151225",rank:1}, 
{date:"20151226",rank:4}, 
{date:"20151227",rank:1}, 
{date:"20151228",rank:5}, 
{date:"20151229",rank:3}, 
{date:"20151230",rank:4}, 
{date:"20151231",rank:2}, 
{date:"20160101",rank:1}, 
{date:"20160102",rank:3}, 
{date:"20160103",rank:2}, 

] }, 
] 



nv.addGraph(function() { 


    var chart = nv.models.lineChart() 

    .x(function(d) {return d3.time.format("%Y%m%d").parse(d.date) }) 
    .y(function(d) {return d.rank}) 
    .yDomain([6, 1]) 
    .color(d3.scale.category10().range()) 
    .useInteractiveGuideline(true) 
    .margin({left: 100}) 
    .margin({right: 50}) 
    .margin({bottom: 100}) 
    ; 




chart.legend.margin({top: 10, right:60, left:80, bottom: 100}); 

chart.xAxis 
    .tickFormat(function(d) {return d3.time.format('%Y-%m-%d')(new Date(d)) }) 
    .rotateLabels(-45) 
    ; 

chart.xScale(d3.time.scale()); //fixes misalignment of timescale with line graph 

    chart.yAxis 
    .axisLabel('Rank') 
    .tickFormat(d3.format('d')) 
    ; 



    d3.select('#chart svg') 
    .datum(data) 
    .transition().duration(500) 
    .call(chart) 
    ; 

nv.utils.windowResize(chart.update); 

    return chart; 
}); 

您可以在這裏找到小提琴：http://jsfiddle.net/Marei/1azqmx1L/3/

謝謝！

Answer 1

我認爲（我以前只是直接與d3一起工作，而不是nvd3），您需要指定要使用tickValues()顯示的xValues列表。

所以，你需要做的第一件事是讓所有的xValues（和/或重複並不重要的順序）的列表：

//Map all xValues for each dataset to an array (tmp) 
var tmp = data.map(function(e) { 
    return e.values.map(function(d) { 
     return d3.time.format('%Y%m%d').parse(d.date); 
    }); 
}); 

//And flatten out that array, so you have all your xValues in a 1D-array 
var xValues = [].concat.apply([], tmp); 

然後用它來設置要顯示所有xValues：

chart.xAxis 
    .tickFormat(function(d) {return d3.time.format('%Y-%m-%d')(new Date(d)) }) 
    .rotateLabels(-45) 
    .tickValues(xValues) 
    .showMaxMin(false) 
    ; 

showMaxMin需要設置爲false，否則所有最終值必須顯示