0

我对如何使用我的数据集配置我的 NVD3 图形感到很困惑。

这是一个简单的折线图，我的数据集包含跨越多年的值。我需要以精简的形式显示这些值，即图表将仅显示 1 年（1 月 -> 12 月），数据集中的每一年都是图表上的单独一行。

目前，如果我绘制数据集，我会绘制所有年份（例如 2008 年 1 月 -> 2010 年 12 月）。这是我的意思的 jsFiddle：http: //jsfiddle.net/xABVB/

我不知道在哪里更改 NVD3/D3 设置。这会在 x 轴域或范围内定义吗？还是需要修改滴答计数？

最好，我希望我的数据集保留为 Date 对象。

我的代码的快速概述（取自 jsFiddle）：

var chart, years;

chart = nv.models.lineChart().x(function(dataPoint) {
    return dataPoint[0];
}).y(function(dataPoint) {
    return dataPoint[1];
});
chart.yAxis.axisLabel('Value').tickFormat(function(value) {
    return value;
});
chart.xAxis.axisLabel('Date').rotateLabels(-45).tickFormat(function(date) {
    return d3.time.format('%b %d')(new Date(date));
});

values = getValues();

if (values === void 0) {
    d3.select(".target svg").datum([]).call(chart);
} else {
    years = [];
    _.each(values, function(element, index, list) {
        return years.push({
            key: element[0][0].getFullYear() + " Year",
            values: element
        });
    });
    d3.select(".target svg").datum(years).call(chart);
}

nv.addGraph(chart);


// Dummy data covering 3 consecutive years.
function getValues(){
    return [[[new Date("2008-01-31T00:00:00.000Z"),10],[new Date("2008-02-29T00:00:00.000Z"),20],[new Date("2008-03-24T00:00:00.000Z"),30],[new Date("2008-04-22T00:00:00.000Z"),40],[new Date("2008-05-19T00:00:00.000Z"),50]],

[[new Date("2009-01-31T00:00:00.000Z"),20],[new Date("2009-02-30T00:00:00.000Z"),30],[new Date("2009-03-22T00:00:00.000Z"),40],[new Date("2009-04-27T00:00:00.000Z"),50],[new Date("2009-05-30T00:00:00.000Z"),60]],

[[new Date("2010-01-06T23:00:00.000Z"),30],[new Date("2010-02-05T23:00:00.000Z"),35],[new Date("2010-03-31T23:00:00.000Z"),45],[new Date("2010-04-30T23:00:00.000Z"),50],[new Date("2010-05-29T23:00:00.000Z"),60]]]

}
4

1 回答 1

0

我的解决方案是将所有输入日期设置为同一年：

chart = nv.models.lineChart().x(function(dataPoint) {
    point = new Date(dataPoint[0])
    point.setFullYear(2000)
    return point;
})

然后，您应该从显示的日期中删除年份（就像您已经做的那样）：

chart.xAxis.axisLabel('Date').rotateLabels(-45).tickFormat(function(date) {
    return d3.time.format('%b %d')(new Date(date));

});

小提琴：http: //jsfiddle.net/chrisJamesC/xABVB/3/

于 2013-07-10T23:07:21.333 回答