D3蜱只顯示週日：

Question

我想爲我的規模開始的第一天與最後一天結束，而不是僅僅顯示週日：

我想爲數據在啓動：28（不3），但它開始於星期日3：

如何在一週中的任何一天開始我的刻度？

我希望顯示的日子與我給圖表的數據不會顯示星期日相匹配。

鏈接例如：http://jsfiddle.net/3LZua/2/

在此先感謝。

P.S.這裏是代碼:(將在html中有一個）

followerLineGraph = function(data) 
{  
    var width = 400; 

    var x = d3.time.scale() 
     .domain([data[0].date, data[data.length - 1].date]) 
     .range([0, width]); 

    var chart = d3.select("#test").append("svg").attr("class", "chart"); 

    //Date Label 
    var xAxis = d3.svg.axis() 
     .scale(x) 
     .ticks(data.length) 
     .tickFormat(d3.time.format('%m/%d-%a')) 
     .tickSize(0) 
     .tickPadding(8); 

    chart.append('g') 
     .attr('fill', '#1ff') 
     .call(xAxis); 
} 

    var data = [ 
     { date: new Date(2013, 1, 28), TotalLikes: 18 }, 
     { date: new Date(2013, 2, 14), TotalLikes: 15 }, 
     { date: new Date(2013, 2, 21), TotalLikes: 17 }, 
     { date: new Date(2013, 2, 28), TotalLikes: 17 }, 
     { date: new Date(2013, 3, 4), TotalLikes: 20 } 
]; 

followerLineGraph(data); 

Answer 1

你在這裏有幾個選擇。

在軸上調用「ticks」會將參數傳遞給基礎比例以獲取繪製座標軸的列表刻度。當你傳入一個單一的數值時，比例將嘗試產生「好」的值。數字值暗示您可能會喜歡多少個嘀嗒聲 - 它不能保證您實際收到的數字。

.ticks(5) 

結果： 3月3日至週日3月10日至週日3月17日週日3月24日週日3月31日，孫

由於您使用的時間尺度也有該選項指定的刻度標記之間的時間量，例如：

.ticks(d3.time.days,7) 

結果： 3月1日至週五3月8日至週五3月15日至週五3月22日至週五3月29日至週五04/01-Mon

這會得到你每7天打一個勾號。但我認爲它仍會嘗試包括像月份開始那樣的「好」時間界限。

對於精細調整（但有點靜態）的情況，您可以實際指定您希望使用tick上的tickValues方法的確切位置。我用它來準確設置你的所有數據點的日期：

xAxis2.tickValues(data.map(function(d) { return d.date;})) 

最後，你可以有一個參數傳遞給蜱函數來獲取準確的刻度每次你想。該函數將起點和終點所以設置蜱那些加中點我所做的：

xAxis3.ticks(function(start, end) { 
    console.log(arguments); 
    var mid = new Date((start.getTime() + end.getTime())/2); 

儘管在這種情況下，你應該設置刻度上的功能，那麼你可以使用步驟通過軸調用參數（詳見d3文檔）。

你可以玩小提琴here。

另請查閱scale ticks和axis tickValues的文檔。還有一個偉大的軸教程here。

Answer 2

我只是遇到了一個非常類似的問題，我無法在d3文檔中找到答案。不過，我參加了一個偷看了D3的源代碼（https://github.com/mbostock/d3/blob/master/d3.js），我能夠找到下面一行：

d3.time.weeks = d3.time.sunday.range; 

有了這個提示一點：需要注意的是，如文檔中所描述的，

var xAxis = d3.svg.axis() 
    .scale(x) 
    .ticks(d3.time.weeks, 1); 

給出了在每個星期日蜱軸 - 等

var xAxis = d3.svg.axis() 
    .scale(x) 
    .ticks(d3.time.xxxday.range, 1); 

給人帶勾的軸線上的每個xxxday，其中xxxday是monday,tuesday,wednesday,thursday,friday, saturday或sunday。