1

I'm building an Angular Directive with a service and controller that shows a common, everyday company hierarchy chain. The code that I have is just about exactly the same as accepted answer to this stack overflow question:

Organization chart - tree, online, dynamic, collapsible, pictures - in D3

I'm creating a service and controller in Angular that is this example but I'm not sure if there is a better way to do this, given that all the D3 rendering is happening in the 'svg' in the Angular service. The controller and service code I have is from this example:

http://codepen.io/glovelidge/pen/Qbbypv/

I want to use a service to handle most of the D3 logic and a controller to bind to the template.

My ultimate goal is take the links above and make it look something like the selected picture on this google images page, basically a company chart but using straight lines connecting the nodes:

https://www.google.com/search?q=org+structure+tree&espv=2&biw=1920&bih=1019&source=lnms&tbm=isch&sa=X&ved=0ahUKEwj9we3x4KXLAhWrlIMKHaBzAiEQ_AUIBigB#imgrc=5QUm4Cjpcv2Y8M%3A

I am new to D3, my questions are:

  • Can I take the curving links from the above examples and make them straight to look like the image in the link on Google Images.
  • Anybody familiar with Angular and D3, is the example in the CodePen link the best way to set up D3 in the service? Or is there a better way to set up that service.

  • Most of the examples I have seen have json with children relationships showing (like the json in the first link, to the stack overflow question, above, but is there a way to connect the nodes by userId. i.e. if my json was 'flat' and looked something like this:

     nodes = [{ userId: 1, name: "Bob" }, { userId: 2, name: "Bill" }, {userId: 3, name: "Jordan}]
 //connect the nodes with these type of edges
 edges = [{ from: 1, to: 2 }, { from: 1, to: 3}]

  • Can I make these nodes draggable around the screen?

  • When you click around on the example in the codePen link, I've noticed that the rectangles behind the text change shapes and the text runs outside of the rectangle. It doesn't seem like normal CSS will help because things are changing dynamically. Is there an efficient way to make the height and width look the same regardless of the state of the nodes (i.e. enter, transition, or exit)

Thanks a lot for the help.

Community
  • 1
  • 1
bschmitty
  • 1,118
  • 3
  • 16
  • 46
  • Look at this link : http://codepen.io/snhasani/pen/ickGq I was able to adjust to work with Knockout.js. Should be possible with angular too – Jurion Mar 07 '16 at 05:36
  • Thanks for the time, I don't see any D3 in your link. I have to do it with D3 like the links I have above. – bschmitty Mar 07 '16 at 18:09

0 Answers0