AngularJS D3 可视化与 n3 图表答案

【问题标题】：AngularJS D3 Visualization with n3 chartsAngularJS D3 可视化与 n3 图表
【发布时间】：2013-10-23 19:16:37
【问题描述】：

我正在创建一个图表，该图表从服务器获取分页数据，然后使用 D3 库和 n3-charts 库 (http://n3-charts.github.io/line-chart/#/examples) 绘制图表我在使用这个库时遇到的问题是我的服务器正在返回一个 PHP W3C 格式的日期，Angular 可以处理和使用过滤器，但是 n3 图表库无法处理这种格式。对于如何将日期字符串转换为日期对象，我尝试了几种不同的想法，但均无济于事。

是否有人使用 d3 库创建了温度与时间的关系图或使用 n3 图表来使其工作？这种类型的图表有更好的选择吗？由于最近的带有指令的 ng-newsletter 示例文章，我才开始这样做。

这是我当前的 ctrl 代码：

var successCb = function(result) {
        result.forEach(function(val, index, theArray) {
            $scope.readings.push(val);
        });
    }
    var errorCb = function(data) {
        console.log('Failed');
    }
    for (var i = 1; i <= 5; i++) {
        Reading.getAll({limit: 1000, page: i}, successCb, errorCb);
    }
    $scope.options = {
        axes: {
            x: {type: "date", key: "_Time"},
            y: {type: "linear"}
        },
        series: [
            {y: "_degreeF", label: "Temp over Time", color: "#9467bd"}
        ],
        lineMode: "linear",
        tooltipMode: "default"
    };

数据样本如下所示：

$scope.data = [
{
    "_ID":1,
    "_time":"2013-10-21T16:46:5905:00",
    "_degreeF":69.58,
    "_degreeC":20.88,
    "_sensor":
        {
        "_ID":2,
        "_name":"Test Sensor 2",
        "_sensorID":"28-00000505f8b6"
        }
},
{
    "_ID":2,
    "_time":"2013-10-21T16:47:01-05:00",
    "_degreeF":69.58,
    "_degreeC":20.88,
    "_sensor":
        {
        "_ID":2,
        "_name":"Test Sensor 2",
        "_sensorID":"28-00000505f8b6"
        }
}
]

【问题讨论】：

你可能想看看这个帖子stackoverflow.com/questions/4829569/…
我的问题不一定是日期格式，因为我可以从服务器发回我想要的任何格式，问题是 Angular 本身可接受的通常日期格式不适用于这个库。

标签： javascript angularjs charts d3.js angularjs-directive

【解决方案1】：

您可以使用 d3 时间格式，d3.time.format，将您的日期解析为 JS Date 对象。

这是一个 d3js 温度线图：

http://vida.io/documents/QZZTrhk7SmfChczYp

带日期解析功能：

d3.time.format("%Y-%m-%d").parse

【讨论】：

【解决方案2】：

是的，这是因为 n3-charts 可以与原生 Date 对象一起使用。您可能希望从后端返回时间戳，然后将它们转换为 SuccessCb 函数中的 Date 对象。

var successCb = function(result) {
    $scope.readings = result.map(function(r) {
        // Assuming there's a timestamp in the _time key
        r.date = new Date(r._time);
        return r;
    });
};

【讨论】：