Javascript D3.js错误：折线图的属性值无效

我正在使用d3.js qith angular js，在显示x轴标签时遇到错误，例如：1月、2月、3月等。。 我正在从json文件读取： 样本数据： [ { 月份：0， 车辆总数：65辆 }等等。。。。。。， ]

使用d3.time.format和 解析它

但最终还是出现了一个错误：属性的值无效

我检查了与此错误相关的所有其他堆栈流问题。我想不出哪里出了问题。 有人能帮我吗。请告诉我哪里出了问题

附在代码段下面

var app = angular.module('chartApp', []);

app.controller('SalesController', ['$scope','$interval', function($scope, $interval){
   $scope.salesData =[];

}]);

app.directive('linearChart', function($parse, $window ,$http){
   return{
      restrict:'EA',
      template:"<svg width='850' height='200'></svg>",
       link: function(scope, elem, attrs){



            $http.get('data.json').
            then(function(response) {
            console.log("line Chart response :"+response);  
                scope.salesData = response.data;

           //var m = moment();    

           var exp = $parse(attrs.chartData);

           var salesDataToPlot=exp(scope);
           var padding = 20;
           var pathClass="path";
           var xScale, yScale, xAxisGen, yAxisGen, lineFun;

           var d3 = $window.d3;
           var rawSvg=elem.find('svg');
           var svg = d3.select(rawSvg[0]);

            var monthNumber = d3.time.format("%-m");
            var monthName = d3.time.format("%B");


            for (i = 0; i < salesDataToPlot.length; i++) {

                var mon = monthNumber.parse((salesDataToPlot[i].month+1).toString());
                salesDataToPlot[i].month = monthName(mon);
            }    

           scope.$watchCollection(exp, function(newVal, oldVal){
               salesDataToPlot=newVal;
               redrawLineChart();
           });

           function setChartParameters(){

               xScale = d3.scale.linear()
                   .domain([salesDataToPlot[0].month, salesDataToPlot[salesDataToPlot.length-1].month])
                   .range([padding + 5, rawSvg.attr("width") - padding]);

               yScale = d3.scale.linear()
                   .domain([0, d3.max(salesDataToPlot, function (d) {
                       return d.total_cars;
                   })])
                   .range([rawSvg.attr("height") - padding, 0]);

               xAxisGen = d3.svg.axis()
                   .scale(xScale)
                   .orient("bottom");
                   /*.ticks(d3.time.months)
                   .tickFormat(d3.time.format("%B"));*/

               yAxisGen = d3.svg.axis()
                   .scale(yScale)
                   .orient("left")
                   .ticks(5);

               lineFun = d3.svg.line()
                   .x(function (d) {
                       return xScale(d.month);
                   })
                   .y(function (d) {
                       return yScale(d.total_cars);
                   })
                   .interpolate("basis");
           }

         function drawLineChart() {

               setChartParameters();

               svg.append("svg:g")
                   .attr("class", "x axis")
                   .attr("transform", "translate(0,180)")
                   .call(xAxisGen);

               svg.append("svg:g")
                   .attr("class", "y axis")
                   .attr("transform", "translate(20,0)")
                   .call(yAxisGen);

               svg.append("svg:path")
                   .attr({
                       d: lineFun(salesDataToPlot),   // This is the line of    code which is giving me the error.
                       "stroke": "blue",
                       "stroke-width": 2,
                       "fill": "none",
                       "class": pathClass
                   });
           }

           function redrawLineChart() {

               setChartParameters();

               svg.selectAll("g.y.axis").call(yAxisGen);

               svg.selectAll("g.x.axis").call(xAxisGen);

               svg.selectAll("."+pathClass)
                   .attr({
                       d: lineFun(salesDataToPlot)
                   });
           }


           drawLineChart();
            }, function(response) {
            console.log("error");
         });

       }
   };
});

您使用的是d3.scale.linear，但随后将月份名称传递给它，如“一月”、“二月”等。。。当您设置域时。这是行不通的，scale.linear希望能处理连续的数字数据

因此，您需要决定是使用x刻度的数字，还是全部使用d3.time.scale刻度的日期。在您的情况下，如果只有一个整数表示一年中的一个月的数据，那么线性可能更容易：

xScale = d3.scale.linear()
    .domain([0,11]) //<-- 12 months
    .range([padding, 500]);

xAxisGen = d3.svg.axis()
    .scale(xScale)
    .orient("bottom")
    .ticks(12) //<-- 12 ticks
    .tickFormat(function(d) {
      // display right month
      return ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'][d]; 
    });

---

谢谢马克的回复。我只想用一个整数表示一个月的数据。所以我更喜欢使用线性。jsfiddle:[link]我尝试了上述解决方案。但我还是犯了同样的错误。错误：属性的值无效