如何爲日期設置dc.js x軸

Question

我有一個帶有2列的CSV文件，第一次我有一些日期，第二次有一些值。

如何初始化x軸以顯示日期？

Answer 1

IMO解決你的問題由兩個部分組成：

1. 解析您的數據的日期爲直流可控格式
2. 編碼圖表

爲了解析這些日期，你需要在腳本中注入您的csv文件後使用這樣的功能：

var parseDate = d3.time.format.utc("%Y-%m-%dT%H:%M:%S-07:00").parse; 

data.forEach(function(d) { 
     d.TxnDate = parseDate(d.TxnDate); 
    }); 

P請注意，根據您的數據，解析條件可能會有所不同，在這種情況下，請檢查此time formatting article

對於第二部分，下面是一個示例圖表定義，但在此之前您需要定義兩個新變量，它們將作爲我們X軸的起點和終點。定義他們這樣你定義了你的尺寸和組後：

var minDate = transactionDate.bottom(1)[0].TxnDate; 
var maxDate = transactionDate.top(1)[0].TxnDate; 

用於圖表的代碼將是這樣的：

timeChart 
.width(650) 
.height(250) 
.transitionDuration(1000) 
.brushOn(false) 
.dimension(transactionDate) //your dimension created from crossfilter 
.group(fakeTxnDateGroup) // your group 
.elasticY(true) 
.renderHorizontalGridLines(true) 
.renderVerticalGridLines(true) 
.x(d3.time.scale().domain([minDate,maxDate])) //these are the dates we created before this step so that the scale fits according to our data 
.yAxis().tickFormat(d3.format("s")); 

我希望這可以幫助你。如果沒有，請留下一個js小提琴。 謝謝！