Question

我有一个计量图表指令，需要多次放在一个视图中，但控制器中的更新方法只会更新视图中的最后一个指令。最初我想也许我没有将范围设置为之前已经遇到过的隔离范围，但事实并非如此，而且会抛出一个错误，但视图会加载所有图表，但它只更新一个。

我提出了codepen指令来帮助，我在下面包含了指令和控制器的基本存根。注意：只是刚刚开始使用D3并在指令中实现它，因此存在一个问题，当您调整浏览器大小时，指令会倍增（试图使其响应），因此您可能在调整代码集中的浏览器窗口后点击保存。

  .directive('d3Gauge', [
    'D3GaugeConfig',
    function(D3GaugeConfig) {

      return {
        restrict: 'E',
        scope: {
          title: '@chartTitle',
          config: '=chartConfig',
          data: '=chartData'
        },
        link: link,
        template: '<div>{{d3GaugeCtrl.title}}</div>',
        controller: 'D3GaugeController',
        controllerAs: 'd3GaugeCtrl',
        bindToController: true
      };

      function link($scope, $element, $attrs) {
         ...

        // Browser onresize event
        $window.onresize = function() {
          $scope.$apply();
        };

        // Watch for resize event
        $scope.$watch(function() {
          return angular.element($window)[0].innerWidth;
        }, function() {
          render($element, $scope.data);
        });

        $scope.update = update;
      }

      function render(element, newValue) {
         ...
      }

      function update(newValue, newConfiguration) {

         ...
      }
    }
  ])

  .controller('D3GaugeController', [
    '$scope',
    function($scope) {

      var vm = this;

      function updateReadings() {

        // Just pump in random data here...
        if (angular.isDefined($scope.update)) {
          $scope.update(Math.random() * 100);
        }
      }

      // Every few seconds update reading values
      updateReadings();

      setInterval(function() {
        updateReadings();
      }, 5 * 1000);
    }
  ]);

Answer 1

最后一个量规的原因是因为：

您正在存储存储最后一条路径的变量指针。

pointer = pg.append('path')
  .attr('d', pointerLine)
  .attr('transform', 'rotate(' + config.minAngle + ')');

所以现在当你做

 pointer
      .duration(config.transitionMs)
      .ease('elastic')
      .attr('transform', 'rotate(' + newAngle + ')');

只有最后一个指针才会使用新变换进行更新。

因此，如果您想更新相同随机值的所有仪表路径，请执行以下操作：

//select all the path in all svg with group class pointer  
d3.selectAll("svg .pointer path").transition()
          .duration(config.transitionMs)
          .ease('elastic')
          .attr('transform', 'rotate(' + newAngle + ')');//update the new angle

工作代码here

希望这有帮助！

AngularJS + D3多指令仅用于查看一个更新

1 个答案: