D3中的格式刻度

我以「點擊次數」爲Y軸，「日期」爲X軸繪製圖形。由於數據量大，X軸混亂，無法顯示所有日期。我試圖使用ticks（d3.time.months，1）和tickFormat（'％b％Y'）來消除一些ticks。當我運行代碼時，我的數據「getMonth（）未定義」。D3中的格式刻度

.tsv文件：

date count 
2013-01-01 4 
2013-03-02 5

示例代碼：

var x = d3.scale.ordinal() 
     .rangeRoundBands([0, width], .1, 0); 

var xAxis = d3.svg.axis() 
     .scale(x) 
     .orient("bottom")    
     .ticks(d3.time.months, 1) 
     .tickFormat(d3.time.format('%b %Y')) 

d3.tsv("data_Bar_Chart_Paino_Kristen.tsv", type, function(error, data) { 
     x.domain(data.map(function(d) { return d.date; })); 
     y.domain([0, d3.max(data, function(d) { return d.hits; })]); 


     var temp = height + 30; //+15 

     svg.append("g") 
      .attr("class", "x axis") 
      .attr("transform", "translate(-8," + temp + ")") 
      .call(xAxis); 
     svg.selectAll(".bar") 
      .data(data) 
      .enter().append("rect") 
      .attr("class", "bar") 
      .attr("x", function(d) { return x(d.date); }) 
      .attr("width", x.rangeBand()) 
      .attr("y", function(d) { return y(d.hits); }) 
      .attr("height", function(d) {return height - y(d.hits); }); 
}

有沒有解決我的問題的方式和顯示刻度線是否正確？

來源

2013-07-19 whileone

您是先解析日期嗎？ –

@AdamPearce是的，我首先解析了x軸，它是日期。 – whileone

您需要使用時間刻度來使用這種刻度格式，即'd3.time.scale'。 –

您需要告訴D3您的座標軸是日期。試試這個：

//assumes the data is sorted chronologically 
var xMin = data[0].dateFieldName; 
var xMax = data[data.length-1].dateFieldName; 

//set the scale for the x axis 
var x = d3.time.scale().domain([xMin, xMax]).range([0, width]); 

//straight from your code 
var xAxis = d3.svg.axis() 
     .scale(x) 
     .orient("bottom")    
     .ticks(d3.time.months, 1) 
     .tickFormat(d3.time.format('%b %Y'))

這裏的訣竅是使用d3.time.scale()方法。

來源

2013-08-12 15:26:49 l3mm0n

-1

如果您使用d3.time.scale()您還有其他問題，繪製矩形時不能使用x.rangeBand()。

來源

2015-02-19 10:04:40 Andrea

D3中的格式刻度

回答

相關問題