d3.js - 折线图渲染错误且 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))” 甚至没有显示任何内容。

标签： d3.jsdc.jslinechart

Answer 1

谢谢你的努力。

您的语法稍有偏差，并且在使用 D3 时间刻度时，您总是希望使用 JavaScript Date 对象。只有刻度和标签（输出）将被格式化为字符串，所有输入都是日期。

.domain()总是需要一个数组。

你要

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

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

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

继续学习，仔细看看例子在做什么，你会很快学会的！

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