Question

我已经建立了一个条形图并动态放置在一个div中，效果很好。当我使用ng-repeat执行相同的操作时，新生成的图表会附加到现有图表中。

这是我的代码，

HTML：

<div  id="main"  class="drop-container" ng-click="addEvent($event)" droppable>
<div plumb-item class="item" style="margin: 20px; top: 60px; left: 200px; height: 300px; width: 500px" ng-repeat="widget in dashboard.widgets" ng-style="{ 'left':widget.sizeX, 'top':widget.sizeY }"
 data-identifier="{{widget.id}}">
 <div class="box" >
  <div class="box-header" >
  <h3>{{ widget.name }}</h3>
  <div  ng-controller="MainCtrl" class="box-content">
 <bars data="barChart"  ></bars>                 
 </div>
</div>
</div>

App.JS

routerApp.directive('bars', function ($parse) {
      return {
         restrict: 'E',
         scope: {
           data: '=',
           label: '@'
         },
         replace: true,
         template: '<div><div id="chart"></div><h1>{{ label }}</h1></div>',
         link: function (scope, element, attrs) {
           console.log(scope);
            var chart = d3.select("#chart").append("div")
            .attr("class", "chart");

           chart.selectAll("div")
           .data(scope.data)
           .enter().append("div")
           .transition().ease("easeInCubic")
           .duration(0)
           .style("width", function(d) { return d + "%"; })
           .text(function(d) { return d + "%"; });

           scope.$watch('data', function(newVal, oldVal) {
             chart.selectAll("div")
             .data(scope.data)
             .transition().ease("easeInCubic")
             .duration(0)
             .style("width", function(d) { 
              return (d - 2) + "%"; 
             })
             .style("background-color", function(d) {
               var color;
               if (d > 60) {
                 color = 'green';
               } else if (d < 40) {
                 color = 'red';
               } else if (d >= 30 && d <= 60) {
                 color = 'yellow';
               }
               return  color; 
             })
             .text(function(d) { return d + "%"; });
           });

         } 
      };
   })
routerApp.controller('MainCtrl',function($scope) {
  $scope.barChart = [40,4,55,15,16,33,52,20];
   function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
  }

  function randomArray(num_elements,min,max) {
    var nums = new Array;
    for (var element=0; element<num_elements; element++) {
        nums[element] = getRandomInt(min,max);
    }
    return (nums);
  }

  setInterval(function(){
        $scope.$apply(function() {
            $scope.barChart = randomArray(8, 1, 100);
        });
    }, 2000);
});

输出：

enter image description here

Answer 1

如果您为每个图表重复使用相同的指令，那么在您的模板中，您的div id不是唯一的。这样：

var chart = d3.select("#chart").append("div")

将附加到first div with id chart。

相反，在您的链接function中找到element变量的div。

element.children()

返回模板中的DOM元素。

使用您的模板查找外部div的第一个子项应该是（未经测试）：

d3.select(element.children(0).children()[0]));

使用ng-repeat时为什么图表会附加到现有div？

1 个答案: