时间戳

首页 > 解决方案 > 如何在 DC.js 的 Linechart 中将月份名称缩写为 X 轴

d3.js - 如何在 DC.js 的 Linechart 中将月份名称缩写为 X 轴

问题描述

我正在尝试在 DC.js 折线图的 X 轴中获取缩写的月份名称。我已经格式化了月份列并在将其发送到维度之前对其进行了解析。即使在格式化折线图中的刻度之后，我也得到了所有它们的“Dec”。下面是代码。请帮我解决它

 var parseTime = d3.timeParse("%B %d, %Y");
    var parseMonth = d3.timeFormat("%B");

    canadaclimatProjects.forEach(function (d) {

        var date = parseTime(d["year_mon"]);
        d["year_mon"] = parseMonth(date);
    });

var newMonth = ndx.dimension(function (d) { return d["year_mon"]; });

monthlyPrecipitationChart
        .width(380)
        .height(250)
        .round(d3.timeMonth.round)
        .xUnits(d3.timeMonths)
        .x(d3.scaleTime().domain(newMonth))
        .dimension(newMonth)
        .group(precipitationByMonth)
        .brushOn(false)
        .valueAccessor(function (p) { return p.value.count > 0 ?      p.value.total / p.value.count : 0; })
        .elasticX(true)
        .elasticY(true);
        .xAxis().ticks(12).tickFormat(d3.timeFormat("%b"));

标签： d3.jsaxisdc.jslinechart

解决方案

d3.scaleTime()如果您将字符串作为数据的键传递，则将不起作用。您需要传入 Date 对象。

您已经处理了打印带有缩写月份的刻度

    .xAxis().ticks(12).tickFormat(d3.timeFormat("%b"));

因此在输入时格式化日期是多余的（并且不起作用）。

将格式化的数据传递到图表中很少是一个好主意。格式化通常发生在图表绘制之后。

很难说为什么你会得到你描述的结果，没有一个完整的可运行的例子。

推荐阅读