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

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

希望这会有所帮助！