JavaScriptCollection
diff --git a/‎examples/tree/tree-radial.js‎
Lines changed: 16 additions & 6 deletions b/‎examples/tree/tree-radial.js‎
Lines changed: 16 additions & 6 deletions
diff --git a/‎examples/tree/tree.css‎
Lines changed: 1 addition & 0 deletions b/‎examples/tree/tree.css‎
Lines changed: 1 addition & 0 deletions
@@ -20,13 +20,10 @@ d3.json("flare.json", function(json) {
     .enter().append("svg:g")
       .attr("class", "link");
 
-  link.selectAll("line")
+  link.selectAll("path")
       .data(children)
-    .enter().append("svg:line")
-      .attr("x1", function(d) { return x(d.parent); })
-      .attr("y1", function(d) { return y(d.parent); })
-      .attr("x2", function(d) { return x(d.child); })
-      .attr("y2", function(d) { return y(d.child); });
+    .enter().append("svg:path")
+      .attr("d", path);
 
   var node = vis.selectAll("g.node")
       .data(nodes)
@@ -54,6 +51,19 @@ d3.json("flare.json", function(json) {
     });
   }
 
+  // Computes a pretty Bézier curve from parent to child. TODO reusable helper?
+  function path(d) {
+    var y0 = (d.parent.y + d.child.y) / 2,
+        p0 = d.parent,
+        p3 = d.child,
+        p1 = {x: p0.x, y: y0},
+        p2 = {x: p3.x, y: y0};
+    return "M" + x(p0) + "," + y(p0)
+         + "C" + x(p1) + "," + y(p1)
+         + " " + x(p2) + "," + y(p2)
+         + " " + x(p3) + "," + y(p3);
+  }
+
   // Radial scales for x and y.
   function x(d) { return d.y * Math.cos((d.x - 90) / 180 * Math.PI); }
   function y(d) { return d.y * Math.sin((d.x - 90) / 180 * Math.PI); }
 
@@ -9,6 +9,7 @@
 }
 
 .link {
+  fill: none;
   stroke: #ccc;
   stroke-width: 1.5px;
 }
Original file line number	Diff line number	Diff line change
`@@ -9,6 +9,7 @@`
`9`	`9`	`}`
`10`	`10`
`11`	`11`	`.link {`
	`12`	`+ fill: none;`
`12`	`13`	`stroke: #ccc;`
`13`	`14`	`stroke-width: 1.5px;`
`14`	`15`	`}`