I am very interested about seeing D3 with Angular. DangleJS is a new one. I have to look through it at a better time.
I'm currently in the process of moving our hand coded D3 visualizations to Angular and trying to decide how to handle graph's parameters (axis, colors, scale etc.), data bindings and interactivity. One option I see is to adopt the Vega D3 library and create directives for its components.
If open sourcing your work wont be possible, perhaps you could tell more about the implementation?
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.
I'm currently in the process of moving our hand coded D3 visualizations to Angular and trying to decide how to handle graph's parameters (axis, colors, scale etc.), data bindings and interactivity. One option I see is to adopt the Vega D3 library and create directives for its components.
If open sourcing your work wont be possible, perhaps you could tell more about the implementation?