Hacker News Reader

Comment by csmatt | Hacker News Reader

I've been creating a bunch of angularjs directives for d3 for a project at work and was thinking about seeing if they would let me put them up on github. I've seen FullScale's danglejs, but it's not as configurable as we'd like and only has a handful of visualizations.

If you're interested in us open-sourcing them, please let me know and I'll convince them to let me put the code up.

ex: to produce this http://mbostock.github.io/d3/talk/20111018/tree.html

<collapsible-tree orient="horizontal" bind="treeData" click-node="handleNodeClick" dbl-click-node="handleNodeDblClick"></collapsible-tree>

View on HN

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.

Hope that helps, Matt

Yes, thank you. I think I got the gist.

Vega comes with "free" PNG and Canvas support, which is useful to me.

Reply on news.ycombinator.com