0

I have managed to get this D3 example working but now I need to change the orientation from left-to-right to top-to-bottom.

I have had a look at this post and this one and tried changing the X,Y coordinates around but did not have much joy. I managed to get the nodes stacked vertically but the node links were still vertical and the spacing between nodes was totally off and they overlapped.

Community
  • 1
  • 1
gurarach
  • 21
  • 4

1 Answers1

1

Try this example:

var diagonal = d3.svg.diagonal() .projection(function (d) { return [d.y, d.x]; });

var diagonal = d3.svg.diagonal() .projection(function (d) { return [d.x, d.y]; });

Manoj
  • 1,860
  • 1
  • 13
  • 25
  • I don't think this model can be moved easily between orientations - it needs completely different calculations to space the nodes once moved – gurarach Jan 07 '14 at 14:03
  • I checked the link. The node text is bunched up at the bottom on the link and the same in my code. Getting it spaced out evenly and having all the other functions running correctly (zooming, panning ect) will require a detailed run through of the code and I don't have much JS experience. I was hoping I had missed something simple to convert the layout but it seems more involved than that. – gurarach Jan 07 '14 at 14:11
  • for spacing problem use separation, nodeSize.... d3.layout.tree() .nodeSize([50, 80]) .separation(function (a, b) { return (a.parent == b.parent ? 1 : 2); }); – Manoj Jan 07 '14 at 14:18