title: Tree/dendrogram with elbow connectors in d3
body: <p>I'm very new to d3.js (and SVG in general), and I want to do something simple: a tree/dendrogram with angled connectors.</p>
  
  <p>I have cannibalised the d3 example from here:<a href="http://mbostock.github.com/d3/ex/cluster.html" rel="noreferrer">http://mbostock.github.com/d3/ex/cluster.html</a> 
  and I want to make it more like the protovis examples here: </p>
  
  <ul>
  <li><a href="http://mbostock.github.com/protovis/ex/indent.html" rel="noreferrer">http://mbostock.github.com/protovis/ex/indent.html</a> </li>
  <li><a href="http://mbostock.github.com/protovis/ex/dendrogram.html" rel="noreferrer">http://mbostock.github.com/protovis/ex/dendrogram.html</a></li>
  </ul>
  
  <p>I have made a start here: <a href="http://jsbin.com/ugacud/2/edit#javascript,html" rel="noreferrer">http://jsbin.com/ugacud/2/edit#javascript,html</a> and I think it's the following snippet that's wrong: </p>
  
  <pre><code>var diagonal = d3.svg.diagonal()
  .projection(function(d) { return [d.y, d.x]; });
  </code></pre>
  
  <p>However there's no obvious replacement, I could use <code>d3.svg.line</code>, but I don't know how to integrate it properly, and ideally I'd like an elbow connector....although I am wondering if I am using the wrong library for this, as a lot of the d3 examples I've seen are using the gravitational force to do graphs of objects instead of trees.</p>