Question

我有一个不断增长的动态JSON文件，我正在尝试创建一个随JSON文件一起增长的图形。每次有一个节点添加到JSON文件时，还会添加一个节点。目前有效。但是，我还将节点的大小存储在JSON文件中，当更改时，我希望图形的大小也更新。我目前有一个节点的指令，我正在创建一个节点对象数组，然后我重复它们。我觉得我这样做非常不理想，必须有更好的方法。

我觉得这可能与ng-repeat的工作方式有关，就像我刷新页面时所显示的那样。

JSON文件目前的格式为：

{"nodes": [{"category": "...", "group": 1, "uid": 0, "number": 1, "complaints": [" ...,..."], "name": "..."}], "links": ['source':"",'target':"",'value':""]}

指令：

<div id="{{node.uid}}" style="top:{{node.y}};left:{{node.x}};width:{{node.d}};height:{{node.d}};background:black;-webkit-border-radius:{{node.d/2}}px;-moz-border-radius:{{node.d/2}}px;border-radius:{{node.d/2}}px;position:relative"></div>

js文件：

$.ajaxSetup({ cache: false });
var appname = angular.module('appname', []);

//this sets up the factory for the categories data file
appname.factory('categories', function($http){
  return {
    list: function(callback){
      $http.get('js/categories.json').success(callback);
    }
  };
});

appname.directive('test', function(){
  return {
    scope: true,
    restrict: 'A',
    templateUrl: 'test.html'
  };
});

appname.controller('appCtrl', ['$scope','$http', 'categories','$interval',function($scope, $http, categories, $interval)
{

  $scope.nodes = [];

  // This when took in conjuction with the interval and and the categories service causes the json to update each second
  $scope.updateJSON = function(){
    categories.list(function(categories) {
      $scope.jsonData = categories;
    });
  }

  //need to make sure what the false does at the end
  $interval(function() {
    $scope.updateJSON();
  }, 2000, false);

  $interval(function() {
    //here we call the update fucntion to the drawings
    $scope.updateGraph();
  }, 5000, false);

  $scope.updateGraph = function(){
    for(var i = 0; i < ($scope.jsonData.nodes).length; i++){
      var n = $scope.jsonData.nodes[i];
      //if there is not a node with that id already in the nodes array create one
      if($scope.nodes[n.uid]==undefined){
          var tempNode = {
              uid: n.uid,
              name: n.name,
              number: n.number,
              complaints: n.complaints,
              d: n.number*10,
              x: Math.floor(Math.random() * 800),
              y: Math.floor(Math.random() * 480)
          }
        $scope.nodes.splice(n.uid, 0, tempNode);
      }else{/**
        var a = $scope.nodes[n.uid].number;
        $scope.nodes[n.uid].number = n.number;
        var b = $scope.nodes[n.uid].number;
        console.log("node: " + n.uid + " beofre " + b + "after "+b);
        $("#"+n.uid+"").hide().fadeIn('slow');
        **/
      }
    }
  }
  }
}]);

http文件：

<html data-ng-app="appname">
  <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>
  <script src="js/model.js"></script>
  <link rel = "stylesheet" type = "text/css" href = "style.css" />
  </head>

  <body>
    <div id="displayBox">
      <div ng-controller="appCtrl" width="800" height="480">
      <!--  This will draw a circle on the scteen for each node in the node list -->
        <div ng-repeat="node in nodes" test="node"></div>
      </div>
    </div>
  </body>
</html>

在JEG中更新AngularJS中的动态图

0 个答案: