линейный график рендерится неправильно и проблема с осью X (время), не может почистить график - временной ряд dc.js - PullRequest
Новая
       30

линейный график рендерится неправильно и проблема с осью X (время), не может почистить график - временной ряд dc.js

1 голос
/ 09 июля 2019

Я создаю панель инструментов для инструмента сканирования. Я создал кучу графиков, но застрял при построении линейной диаграммы, чтобы показать что-то вроде временного ряда (например, сколько записей заполняется в определенное время сканирования). Я использую dc.js и попробовал несколько способов, но линия не рендерится правильно, и на оси есть странные вещи.

Я тоже не могу почистить график, он выдает «координатная сетка-миксин.js: 1083 Uncaught TypeError: undefined не является функцией».

У меня есть метка времени UNIX, которую я конвертирую в дату и время, а затем использую их для построения линейного графика.

My present time series line graph image.

//Converting the timestamp
var dateFormatSpecifier = "%m/%d/%Y";
var day_FormatSpecifier = "%d %b %y";
var dateFormat = d3.timeFormat(dateFormatSpecifier);
var dayFormat = d3.timeFormat(day_FormatSpecifier)
var dateFormatParser = d3.timeParse(dateFormatSpecifier);
var numberFormat = d3.format(".2f");


facts.forEach(function(d) { 
    console.log('Before Change : ' + d.timestamp);
    d.date = new Date(d.timestamp * 1000);

    d.month = d3.timeMonth(d.date);
    d.day = d3.timeDay(d.date);

    d.date = dateFormat(d.date);
    d.day = dayFormat(d.day)

    console.log('After Change : ' + d.date + ' ' + d.month + ' '+ d.day);
    // console.log('After Change Month: ' + d.month);
  });

//Plotting

var dateDim = data.dimension(function(d) { return (d.day);});
var groupForSNR = dateDim.group().reduceCount(item => 1);

var time_chart = dc.lineChart("#time-chart");

var minDate = dateDim.bottom(1)[0].date;
console.log('min : ' + minDate);
var maxDate = dateDim.top(1)[0].date;
console.log('max : ' + maxDate);

var xmin = dayFormat(new Date(1559890800*1000))
console.log('xmin : ' + xmin);
var xmax = dayFormat(new Date(1561878000*1000))
console.log('xmin : ' + xmax);

time_chart
    .height(150)
    .transitionDuration(500)
    .margins({top: 10, right: 10, bottom: 20, left: 40})
    .dimension(dateDim)
    .group(groupForSNR)
    .brushOn(true)
    .elasticY(true)
    .y(d3.scaleLinear().domain([0,100]))
    .x(d3.scaleOrdinal().domain(xmin, xmax))
    .xUnits(d3.timeDay);

    time_chart.xAxis().ticks(15);
    time_chart.yAxis().ticks(10);

-

". X (d3.scaleTime (). Domain (xmin, xmax))" даже ничего не отображает.

1 Ответ

0 голосов
/ 10 июля 2019

Спасибо за ваши усилия.

Ваш синтаксис немного отключен, и вы всегда хотите работать с объектами JavaScript Date при использовании шкал времени D3. Только галочки и метки (выходные данные) будут отформатированы как строки, все входные данные будут датами.

.domain() всегда принимает массив.

Вы хотите 

var minDate = dateDim.bottom(1)[0].day; // Date object
var maxDate = dateDim.top(1)[0].day;

.x(d3.scaleTime().domain([minDate, maxDate]))

Не уверен, что это единственные проблемы - все остальное выглядит хорошо, но трудно понять, не пытаясь.

Просто продолжайте учиться, внимательно посмотрите на то, что делают примеры, вы быстро это поймете!

РЕДАКТИРОВАТЬ: вы найдете примеры, где даты форматируются в виде строк с порядковой шкалой на входе. Есть только отдельные случаи, когда это хорошая идея, и я не думаю, что это одна из них.

...