How pass json from angularjs to d3?

Question

in my application controller I make a request to my api. It looks like this :

.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);
        });
      },
    })

my d3 script is something like this :

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

How can I pass data I receive from api (in the controller) to my d3 display (in and html file).

Well you don't need to do d3.json since you have already done the Ajax in the controller , so you will need to move the code inside d3.json success block into the then function of the promise — Cyril Cherian
– Cyril Cherian, Commented Nov 27, 2016 at 10:00

Dmytro Rudnitskikh · Accepted Answer · 2016-11-27 11:29:42Z

More "angular way" is loadind data in a service and creating a directive to render your d3 component like:

.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);
                  } 
                ...
                ...
            }
        })
  } 
});

To usage this directive, just put in your html:

<map-element></map-element>

Collectives™ on Stack Overflow

How pass json from angularjs to d3?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related