D3.js错误：的值无效 <path> 折线图的属性

Question

我正在使用d3.js qith角JS，在显示x轴标签时遇到错误（例如：1月，2月，3月等。）我从json文件中读取：样本数据：[{“ month”： 0，“ total_cars”：65}等......，]

然后使用d3.time.format将月份数字“ 0”转换为月份“ Jan”并进行解析。

但是我仍然遇到错误：attribute的值无效。

我经历了与此错误有关的所有其他堆栈流问题。 无法弄清楚我要去哪里。 谁可以帮我这个事。 请让我知道我要去哪里错了。

附在代码段下方。

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");
         });

       }
   };
});

Answer 1

您使用的是d3.scale.linear()但是在设置域时将其传递给月份名称，例如“ Jan”，“ Feb”等。 scale.linear不能使用连续数值数据。

因此，您需要确定是否要使用x比例尺的数字还是全部使用d3.time.scale()比例尺的日期。 在你的情况，如果你只是有一个表示一个月有价值的数据一年的整数，然后linear可能是更容易：

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]; 
    });