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

Question

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

图我也刷不了，丢"coordinate-grid-mixin.js:1083 Uncaught TypeError: undefined is not a 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 日期对象。只有刻度和标签（输出）将被格式化为字符串，所有输入都将是日期。

.domain() 总是接受一个数组。

你想要

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

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

不确定这些是否是唯一的问题 - 其他一切看起来都不错，但如果不尝试就很难判断。

继续学习，仔细看看例子是做什么的，你很快就会上手的！

编辑：您会发现一些示例，其中日期被格式化为在输入时带有序数刻度的字符串。只有在特定情况下这是一个好主意，我认为这不是其中之一。

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

line graph renders wrongly and problem with the X axis (time), cannot brush the graph - time series dc.js

linechart

d3.js

dc.js

-