title: Drawing D3 Diagonals using ScalaJS
body: <p>I'm having troubles trying to draw "Diagonal" lines using the ScalaJS D3 library here: <a href="https://github.com/spaced/scala-js-d3" rel="nofollow">https://github.com/spaced/scala-js-d3</a></p>
  
  <p>I started with the original JS example here: <a href="http://jsfiddle.net/MetalMonkey/JnNwu/" rel="nofollow">http://jsfiddle.net/MetalMonkey/JnNwu/</a></p>
  
  <pre><code>// root is a js.Dynamic holding JSON data
  val nodes = 
    tree
    .nodes(root)
    .reverse
  
  val svg = d3.select("#tree").append("svg")
  val links = tree.links(nodes)
  val projector = (d: Node, num: Double) =&gt; { js.Tuple2(d.x, d.y) }
  val diagonal = d3.svg.diagonal()
      .projection(projector)
  
  val link = 
    svg
    .data(links)
    .append("line")
    .attr("class", "link")
    .style("stroke-width", 5)
    .attr("d", diagonal)
  </code></pre>
  
  <p>Attempting to pass the "diagonal" function gets me:</p>
  
  <pre><code>[error]  found   : (scala.scalajs.js.Dynamic, Int, scala.scalajs.js.UndefOr[Int]) =&gt; String
  [error]  required: scala.scalajs.js.Function3[org.singlespaced.d3js.Link[scala.scalajs.js.Dynamic],Int,scala.scalajs.js.UndefOr[Int],scala.scalajs.js.|[scala.scalajs.js.|[Double,String],Boolean]]
  [error]              .attr("d", (value: Dynamic, x: Int,y:  js.UndefOr[Int]) =&gt;   "Completely lost.")
  [error]                                                                      ^
  [error] one error found
  </code></pre>
  
  <p>At a loss, I tried to just pass <em>any</em> function that fit the required signature:</p>
  
  <pre><code>val link = 
    svg
    .data(tree.links(nodes))
    .append("line")
    .attr("class", "link")
    .style("stroke-width", 5)
    .attr("d", (value: Link[Dynamic], x: Int,y:  js.UndefOr[Int]) =&gt;  "Totally lost": Primitive)
  </code></pre>
  
  <p>Which compiles, only to result in this error being thrown in the browser:</p>
  
  <pre><code>uncaught exception: scala.scalajs.runtime.UndefinedBehaviorError: An undefined
  behavior was detected: [object Object] is not an instance of org.singlespaced.d3js.Link
  </code></pre>
  
  <p>I don't really recognized the</p>
  
  <pre><code>scala.scalajs.js.|[scala.scalajs.js.|[Double,String],Boolean]
  </code></pre>
  
  <p>type, and I haven't found any results explaining if it's a ScalaJS disjunction/either/etc or if that's even relevant. I'm new to ScalaJS and D3, so any pointers are helpful.</p>