树状图 D3 显示两侧的链接

Question

在下面的例子中：http://bl.ocks.org/mbostock/4063570你有一个树状图，所有的链接都显示在右边，有没有办法把它分成两半，一部分在右边，另一部分在左边？

我几乎可以做到，但它不正确：http://jsfiddle.net/8EM4s/3/。我认为通过使用 2 条单独的对角线来绘制左右链接会起作用，但 Y 值仍然像在彼此下方一样被计算出来：

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

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

Answer 1

您可以在这里找到我的解决方案： http://jsfiddle.net/5TK3d/

        var numItems = Math.round(root.children.length /2);
        var nodePositionDictionary = {};
        var rootLeft = {children:[], name:root.name};
        var rootRight = {children:[], name:root.name};
        for(var i=0;i<root.children.length;i++)
        {
            var node = root.children[i];
            if(!(i < numItems))
            {
                rootRight.children.push($.extend({}, node));
            }else{
                rootLeft.children.push($.extend({}, node));
            }
        }       
        var nodesRight = cluster.nodes(rootRight);
        for (var i = 0; i < nodesRight.length; i++) {
            var node = nodesRight[i];
            node.right = true;
            nodePositionDictionary[node.name + (node.parent?node.parent.name:"")] = node;
        };
        var nodesLeft = cluster.nodes(rootLeft);
        for (var i = 0; i < nodesLeft.length; i++) {
            var node = nodesLeft[i];
            node.right = false;
            nodePositionDictionary[node.name + (node.parent?node.parent.name:"")] = node;
        };

        // manually create nodes with their positions instead of doing cluster.nodes because 
        // i want them to be drawn left and right
        var nodes = [];
        updateNodePositions(root);
        function updateNodePositions(n)
        {
            var nodePosition = nodePositionDictionary[n.name + (n.parent?n.parent.name:"")];

            if(nodePosition){
                n.x = nodePosition.x;
                n.y = nodePosition.y;
                n.depth = nodePosition.depth;
                nodes.push(n);
            }

            for(var i=0; i< n.children.length;i++)
            {
                var node = n.children[i];
                node.parent = n;

                nodes.push(node);

                var childNodePosition = nodePositionDictionary[node.name + (node.parent?node.parent.name:"")];
                if(childNodePosition){
                                    node.x = childNodePosition.x;
                                    node.y = childNodePosition.y;
                                    node.depth = childNodePosition.depth;
                                    node.right = childNodePosition.right;
                }

                if(node.children){
                    updateNodePositions(node);
                }
            }

        }