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

Question

我有一个仪表图表指令需要多次放置在 View 中，但 Controller 中的更新方法似乎只更新 View 中的最后一个指令。最初我想也许我没有将范围设置为以前遇到过的隔离范围，但事实并非如此，那样只会引发错误，但 View 确实加载了所有图表，但它只更新一个。

我做了一个codepen指令的帮助，我在下面包含指令和 Controller 的基本 stub 。注意:才刚刚开始使用 D3 并在指令中实现它，因此存在一个问题，即当您调整浏览器大小时，指令会成倍增加(试图使其响应)，因此您可能会在 codepen 中调整浏览器窗口大小时点击保存。

  .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

最后一个gauge变化的原因是:

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

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

希望这对您有所帮助!