anglejsからd3にjsonを渡すにはどうすればいいですか？

Question

私のアプリケーションコントローラで私は私のAPIにリクエストを行います。それは次のようになります。

.state('state1', { 
     url: '/datas/:id', 
     templateUrl: 'myurl.com', 
     title: 'title', 
      controller: function($http, $rootScope, $location, $stateParams){ 
       var id = $stateParams.id;    
     $http.post('http://' + $location.host() + id, {id: id } , {}) 
     .then(function(d){ 

      $rootScope.data = d.data; 
     }, 
     function(err){ 
      console.log(err); 
     }); 
     }, 
    }) 

私D3スクリプトは次のようなものです：

<script> 
 
    ... 
 
    var force = d3.layout.force().size([width, height]).on("tick", tick); 
 

 
    var svg = d3.select("#d3g").append("svg").attr("width", width).attr("height", height); 
 
    var link = svg.selectAll(".link"), 
 
     node = svg.selectAll(".node"); 
 
    ... 
 
    ... 
 
    d3.json("data.json", function(error, json) { 
 
       if (error){ 
 
       console.log(error); 
 
       } 
 
    ... 
 
    ... 
 
</script>

は、どのように私はD3に私は（controllerに）APIからの受信データを渡すことができます表示（inとhtmlファイル）。

Answer 1

より「角度の方法は、」サービスでloadindデータであり、のようなあなたのD3コンポーネントをレンダリングするディレクティブを作成：使用法に

.service('dataLoader', function($http, $location, $stateParams){ 
    return { 
     get: function() { 
      var id = $stateParams.id;    
      return $http 
       .post('http://' + $location.host() + id, {id: id } , {}) 
       .then(function(d){ 
        return d.data; 
       }) 
       .catch(function(err){ 
        return err; 
       }); 
      } 
    } 
}) 

.directive('mapElement', function(){ 
    return { 
    restrict: 'E' 
    scope: {}, 
    controller: function(dataLoader) { 
     ... 
     var force = d3.layout.force().size([width, height]).on("tick", tick); 

     var svg = d3.select("#d3g").append("svg").attr("width", width).attr("height", height); 
     var link = svg.selectAll(".link"), 
      node = svg.selectAll(".node"); 
     ... 
     ... 
     dataLoader 
     .get() 
     .then(function(data){ 
      d3.json(data, function(error, json) { 
        if (error){ 
        console.log(error); 
        } 
       ... 
       ... 
      } 
     }) 
    } 
}); 

ちょうどあなたのhtmlに入れるこのディレクティブ、：

<map-element></map-element>