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脚本是这样的：

＆＃13;

<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>

＆＃13;

如何将从api（在controller）中收到的数据传递到我的d3显示（在和html文件中）。

Answer 1

更多＆＃34;棱角分明的方式＆＃34;是服务中的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>

如何将json从angularjs传递到d3？

1 个答案: