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);
                }
            }

        }

树形图D3显示两侧的链接

1 个答案: