AngularJS integration with D3.js

Question

Could someone describe a simple strategy of integration AngularJS and D3.js? Both libraries seem to work so differently. D3 wants all the data bound to DOM elements and Angular wants to keep it in the ViewModel ("controller").

I am having hard time thinking of how to approach writing a UI in D3 that is interactive while still keeping things in AngularJS.

Any help would be appreciated.

Ethan Jewett · Accepted Answer · 2015-11-17 17:41:57Z

3

Use Angular directives for almost everything. Use of controllers should be minimal. In your d3 code, only interact with the element that the directive provides in its link function. e.g.

.directive('myDirective', function() {
  return {
    link: function(scope, element, attrs) {
      d3.select(element[0]).append('svg');
    }
  };
});

answered Nov 17, 2015 at 17:41

Ethan Jewett

6,01019 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1902183 Over a year ago

Are you saying all the D3.js code would go in the link function? Then, what happens if you need to do something to some other element on click of this one?

Ethan Jewett Over a year ago

Yup. You would use Angular functionality to communicate to the other directive that it needs to change its state. I usually use a service to manager communication between directives. Import the service in your directives and have them register callbacks with the service in their link functions.

Collectives™ on Stack Overflow

AngularJS integration with D3.js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related