Как настроить dc.js ось x для дат

Question

У меня есть файл CSV с 2 столбцами, в первом у меня есть несколько дат, во втором - некоторые значения.

Как инициализировать ось 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); 
    }); 

Обратите внимание, что критерии анализа могут отличаться в зависимости от ваших данных. В этом случае проверьте это. 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. Спасибо!