javascript - Angular 中的 nvd3 图表抛出 TypeError : tickExit. 调用不是函数

Question

我正在使用 nvd3.js 在 Angular 项目中显示图表。我创建了以下指令:

.directive('lineChart', function($window) {
  return {
    restrict: 'E',
    scope: {
      // Bind the data to the directive scope.
      data: '=',
      // Allow the user to change the dimensions of the chart.
      height: '@',
      width: '@'
    },
    // The svg element is needed by D3.
    template: '<svg ng-attr-height="{{ height }}" ng-attr-width="{{ width }}"></svg>',
    link: function(scope, element) {
      var d3 = $window.d3;
      var nv = $window.nv;

      var svg = element.find('svg'),
      chart;

      // This function is called when the data is changed.
      var update = function() {
        d3.select(svg[0])
          .datum(scope.data)
          .call(chart);
      };

      // Render the chart every time the data changes.
      // The data is serialized in order to easily check for changes.
      scope.$watch(function() { return angular.toJson(scope.data); }, function() {
        // The chart may not have been initialized at this point so we need
        // to account for that.
        if (chart) {
          update();
        }
      });

      // The chart can not be rendered at once, since the chart
      // creation is asynchronous.
      scope.$on('chartinit', update);


      nv.addGraph(function() {
        chart = nv.models.linePlusBarChart()
          .margin({top: 30, right: 60, bottom: 50, left: 70})
          //We can set x data accessor to use index. Reason? So the bars all appear evenly spaced.
          .x(function(d,i) { return i; })
          .y(function(d,i) {return d[1]; })
          ;

        chart.xAxis.tickFormat(function(d) {
          var dx = scope.data[0].values[d] && scope.data[0].values[d][0] || 0;
          return d3.time.format('%x')(new Date(dx));
        });

        chart.y1Axis
          .tickFormat(d3.format(',f'));

        chart.y2Axis
          .tickFormat(function(d) { return '$' + d3.format(',f')(d); });

        chart.bars.forceY([0]);

        scope.$emit('chartinit');

        return chart;
      });
    }
  };
});

这会引发以下错误:

TypeError: tickExit.call is not a function
at SVGGElement.<anonymous> (d3.js:8673)
at d3.js:8561
at d3_selection_each (d3.js:890)
at Array.d3_transitionPrototype.each (d3.js:8559)
at Array.axis (d3.js:8643)
at Array.d3_selectionPrototype.call (d3.js:897)
at SVGGElement.<anonymous> (nv.d3.js:1086)
at d3.js:884
at d3_selection_each (d3.js:890)
at Array.d3_selectionPrototype.each (d3.js:883)

我之前发现隐藏轴可以解决问题，但我需要它们显示。

Answer 1

自从我找到适用于 d3.js 的修复程序以来，我正在对自己做出回答在函数 d3.svg.axis 中，我改变了

tickExit = d3.transition(tick.exit()).style("opacity", ε).remove()

至

tickExit = d3.transition(tick.exit()).style("opacity", ε)

不知道为什么这个错误没有更多地出现。