D3指令-获取路径无效值的错误

我是使用D3的新手，我试图写出一个指令来创建一个面积图。我以为我已经正确地写出了指令，但我得到了一个关于路径无效值的错误。我认为这与没有正确解析日期有关。我花了很多时间试图修复它，但没有结果。我希望有人看看它，因为我可能错过了一些东西。数据来自控制器中的JSON数组。

$scope.dataArray =  [
    {"date":"2014-10-05T15:48:52-07:00","value":16}, 
    {"date":"2014-07-15T22:26:11-07:00","value":24}, 
    {"date":"2014-09-23T18:52:10-07:00","value":54},
     and so on . . .
  ];

希望有一双新的眼睛能发现我做错了什么。

(function(){
'use strict';
 angular.module('d3AngularApp')
    .directive('testAreaChart', ['d3Service', function (d3Service){
    var link = function($scope, $el, $attrs){
    d3Service.d3().then(function (d3){
    var margin = {top: 20, right: 20, bottom: 30, left: 50},
        width = $el[0].clientWidth - margin.left - margin.right,
        height = $el[0].clientHeight - margin.top - margin.bottom;
    var parseDate = d3.time.format("%d-%b-%y").parse;
    var x = d3.time.scale()
        .range([0, width]);
    var y = d3.scale.linear()
        .range([height, 0]);
    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");
    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");
    var svg = d3.select($el[0])
        .append("svg");
    var updateGraph = function (){
            var data = $scope.chartdata;
            data.forEach(function(d) {
                d.date = parseDate(d.date);
                d.value = +d.value;
              });
            var area = d3.svg.area()
                .x(function(d) { return x(d.date); })
                .y0(height)
                .y1(function(d) { return y(d.value); });

            svg.attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
              .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

              x.domain(d3.extent(data, function(d) { return d.date; }));
              y.domain([0, d3.max(data, function(d) { return d.value; })]);
              svg.append("path")
                  .datum(data)
                  .attr("class", "area")
                  .attr("d", area);
              svg.append("g")
                  .attr("class", "x axis")
                  .attr("transform", "translate(0," + height + ")")
                  .call(xAxis);
              svg.append("g")
                  .attr("class", "y axis")
                  .call(yAxis)
                .append("text")
                  .attr("transform", "rotate(-90)")
                  .attr("y", 6)
                  .attr("dy", ".71em")
                  .style("text-anchor", "end")
                  .text("Price ($)");
              resize();
            };

            function resize(){
                var newWidth = $el[0].clientWidth,
                newHeight = (Math.round($el[0].clientWidth * .75));
                svg.attr('width', newWidth);
                svg.attr('height', newHeight )
            }
            $scope.$on('windowResize', resize);
            $scope.$watch('chartdata', updateGraph);
    })
 }
      return {
         restrict: 'E',
         template: '<div class="areachart col-md-12"></div>',
         replace: true,
         scope : {chartdata: '='},
         link: link
      }
    }]);
})();