javascript - 如何将json从angularjs传递到d3？

Question

在我的应用程序 Controller 中，我向我的 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>

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

Answer 1

更多“Angular 方式”是在服务中加载数据并创建指令来渲染 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>