I looked at Vega, but couldn't see much benefit in it. My implementation isn't too crazy.
- The data must be on the scope containing the directive.
- There's a scope.$watch('bind', function(newVal){}) in the directive's link function which will call an update() function that contains the d3 calls.
- The directive template is something like <div class="visualization directiveName"><svg></svg></div> (when starting, I do scope.vis = d3.select(element.find('svg')[0]) . Since there's a class on the template, I use that to define styles via css. You can also put a class in the directive tag itself to target css style more specifically.)
- Handling interactions (ex: specifying what happens when double clicking a node) is done by specifying an attribute and setting it to a function on the parent controller's scope (ex: dbl-click-node="handleDblClickFunction"). In the directive's d3 code, I add a listener for double clicks on a node and have the attached function call scope.handleDblClickFunction with the event arguments.
- The data must be on the scope containing the directive. - There's a scope.$watch('bind', function(newVal){}) in the directive's link function which will call an update() function that contains the d3 calls. - The directive template is something like <div class="visualization directiveName"><svg></svg></div> (when starting, I do scope.vis = d3.select(element.find('svg')[0]) . Since there's a class on the template, I use that to define styles via css. You can also put a class in the directive tag itself to target css style more specifically.) - Handling interactions (ex: specifying what happens when double clicking a node) is done by specifying an attribute and setting it to a function on the parent controller's scope (ex: dbl-click-node="handleDblClickFunction"). In the directive's d3 code, I add a listener for double clicks on a node and have the attached function call scope.handleDblClickFunction with the event arguments.
Hope that helps, Matt