樹形圖直觀的反應了資料之間的層次關係是現實應用中使用的比較普遍的一類圖形化資料表示方法，使用d3.js繪製樹狀圖的過程中，採取橫縱座標交換方式，可實現思維導圖形式的樹狀圖，示例程式碼如下：

        var width = 800,
            height = 800;

        //====================separation 表示設定節點間間隔，採用思維導圖方式展示樹狀圖，需要保持畫板寬度大於畫板高度=================================
        var tree = d3.layout.tree()
            .size([width, height-150])
            .separation(function (a, b) { return (a.parent == b.parent ? 1:2); });

        var diagonal = d3.svg.diagonal()
            .projection(function (d) { return [d.y, d.x]; });

        var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("transform", "translate(40,0)");
        

        d3.json("../data/city.json", function (error, root) {

            var nodes = tree.nodes(root);
            /*nodes.forEach(function (d) {
                d.y=
            });
            */

            //=============通過改變節點座標，重新設定節點間的連線長度
            nodeSeperateSpace = 5;
            nodes.forEach(function (d) {
                d.x = d.x + d.depth * nodeSeperateSpace;
                //if (d.depth==0)
                    d.y = d.y - d.depth*50;
                //else
                    //d.y = d.y - 150;
            });

            var links = tree.links(nodes);

            console.log(nodes);
            console.log(links);

            var link = svg.selectAll(".link")
                .data(links)
                .enter()
                .append("path")
                .attr("class", "link")
                .attr("d", diagonal);

            //========================注意繪製節點時，節點的橫縱座標位置和資料的橫縱座標位置是相反的，這個樹圖的座標計算演算法有關============
            var node = svg.selectAll(".node")
                .data(nodes)
                .enter()
                .append("g")
                .attr("class", "node")
                .attr("transform", function (d) { return "translate(" + d.y + "," + d.x + ")"; })

            //============未設定圓的圓心座標者，預設為0，0===============
            node.append("circle")
                .attr("r", 4.5);

            node.append("text")
                .attr("x", function (d) { return d.children ? -8 : 8; })
                .attr("y", 3)
                .style("text-anchor", function (d) { return d.children ? "end" : "start"; })
                .text(function (d) { return d.name; });
        });