D3.jsのtreeを縦方向で表示したい

WEBデザインD3.js,JavaScript

デモを色々見ましたがx軸方向に伸びるツリーしかなくいじってみました。以下サンプルです。

var link = g.selectAll(".link")
  .data(root.descendants().slice(1))
  .enter()
  .append("path")
  .attr("class", "link")
  .attr("d", function(d) {
    return "M" + d.y + "," + d.x +
    "C" + (d.parent.y + 100) + "," + d.x +
    " " + (d.parent.y + 100) + "," + d.parent.x +
    " " + d.parent.y + "," + d.parent.x;
});
var node = g.selectAll(".node")
  .data(root.descendants())
  .enter()
  .append("g")
  .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
座標を指定している箇所のみ見てみます。
transformプロパティのtranslateが怪しいです。以下d.xとd.yを入れ替えたもの。

パスの座標(d.parent.xとd.parent.y)も入れ替えます。

制御点の座標も以下のように調整します。
var link = g.selectAll(".link")
  .data(root.descendants().slice(1))
  .enter()
  .append("path")
  .attr("class", "link")
  .attr("d", function(d) {
    return "M" + d.x + "," + d.y +
    "C" + d.x + "," + (d.y-300) +
    " " + d.parent.x + "," + (d.parent.y+300) +
    " " + d.parent.x + "," + d.parent.y;
});

さらにルートを下にしたいのでyに-1をかけてx軸に対して線対称移動します。ただしx軸が中心を通っていないため高さを足して平行移動させます。
var link = g.selectAll(".link")
  .data(root.descendants().slice(1))
  .enter()
  .append("path")
  .attr("class", "link")
  .attr("d", function(d) {
    return "M" + d.x + "," + (-1*d.y+height) +
    "C" + d.x + "," + (-1*d.y+300+height) +
    " " + d.parent.x + "," + (-1*d.parent.y-300+height) +
    " " + d.parent.x + "," + (-1*d.parent.y+height);
});
var node = g.selectAll(".node")
  .data(root.descendants())
  .enter()
  .append("g")
  .attr("transform", function(d) { return "translate(" + d.x + "," + (-1*d.y+height) + ")"; })