折线图渲染错误，X轴（时间）出现问题，无法刷图-时间序列dc.js

Question

我正在为扫描工具创建仪表板。我创建了一堆图形，但一直坚持绘制折线图以显示某种类似于时间序列的图形（例如在该特定扫描时间填充了多少条记录）。我正在使用dc.js，并尝试了几种方法，但是该行无法正确呈现，并且轴上出现了奇怪的事情。

我也不能刷图，它抛出了“ coordinate-grid-mixin.js：1083 Uncaught TypeError：undefined is not function”。

我有一个UNIX时间戳，我将其转换为日期时间，然后使用它们来绘制折线图。

//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））”甚至什么也没有显示。

Answer 1

感谢您的努力。

您的语法略有不同，并且在使用D3时标时，您始终希望使用JavaScript Date对象。仅刻度和标签（输出）将被格式化为字符串，所有输入将为日期。

CourseMember始终采用数组。

你想要

.domain()

不确定是否只有这些问题-其他一切看起来都还不错，但是很难不去说。

只需继续学习，仔细查看示例的操作，您将很快了解它！

编辑：您将找到示例，其中日期格式为输入时按序数标度的字符串格式。在特定情况下，这是个好主意，我不认为这是其中之一。