【D3.js】縦方向の階層ツリーを横方向にするには

JavaScript

var dataList = {    name:"ルートディレクトリ",    children:[        { name:"ファイル1" },        { name:"ファイル2" },        {             name:"フォルダA",            children:[                { name:"ファイルC" },                { name:"ファイルD" },                { name:"ファイルE" },                { name:"フォルダB",                    children:[                        { name:"ファイルF" },                    ]                }            ]        }    ]};var svgWidth = 320; // SVG領域の横幅var svgHeight = 240;    // SVG領域の縦幅var offsetY = 10;   // 全体の位置調整用var svg = d3.select("#myGraph").append("svg")    .attr("width", svgWidth).attr("height", svgHeight)var color = d3.scale.category10();  // 10色を指定// ツリーレイアウトvar tree = d3.layout.tree()    .size([320, 220])   // ツリーノードの描画範囲を指定var nodes = tree.nodes(dataList);   // ノードを抽出// ツリーの線を描くsvg.selectAll("path")   // パスを対象にする    .data(tree.links(nodes))    // リンク情報を読み込む    .enter()    .append("path") // パスを生成する    .attr("d", d3.svg.diagonal())//ノード間を絆ぐ    .attr("fill", "none")    .attr("stroke", "#aaa")    .attr("stroke-width", 1)    .attr("transform", "translate(0, "+offsetY+")")// ツリーの開始点、分岐点、末端を●で表示するsvg.selectAll("circle") // 円を選択    .data(nodes)    .enter()    .append("circle")   // 円を追加    .attr("cx", function(d){ return d.x })  // 中心のX座標を設定    .attr("cy", function(d){ return d.y+offsetY })  // 中心のY座標を設定    .attr("r", 10)  // 半径を設定    .style("stroke", "red") // 色を設定    .style("fill", "white") // 塗りを白色にする// 階層を示す値を表示するsvg.selectAll("text")    .data(nodes)    .enter()    .append("text") // 文字の要素を追加    .attr("x", function(d){ return d.x })    .attr("y", function(d){ return d.y+14 })    .attr("text-anchor", "middle")  // 座標の中央から描画    .attr("font-size", 14)  // 14ptにする    .attr("font-weight", "bold")    // 太字にして読みやすくする    .text(function(d){        return d.name; // 深さを表示する    })    .style("fill", "black");    // 塗りを黒色にする