Question

我正在研究D3.js的树形布局。它是简单的树形布局，但每个节点有8个或9个以上的子节点。

因此，如果我每行设置3个子节点，那么我需要将子节点分成行，如果节点有7个子节点，则节点下面有3行，而3,3,1子节点就像在图像中一样。

我尝试了这个solution但它只是改变了两列的x，y位置，而且当孩子有了一个大孩子而不是节点相互重叠时。

我现在正在深入研究。如果任何人都有解决方案而非欢迎

enter image description here

Answer 1

我已经解决了，但我忘了发帖回答

如果你想按行分割它们，那么

在树之后管理它自己的布局

  var tree = d3.layout.tree()
        .separation(function(a, b) {
            return a.parent === b.parent ? 1 : 0.8;
        })
        .nodeSize([200,200]);

    var _nodesData = tree.nodes(rootObject);
    // _nodesData.forEach(function(d) { d.y = d.depth * 220;});

    _nodesData.forEach(function (d) {
        d.y = d.depth * 220;



        if (d.children) {
            d.children.forEach(function (d, i) {
                d.x =  d.parent.x - (d.parent.children.length-1)*200/30
                    + (d.parent.children.indexOf(d))*200/10 - i % 10 * 100 ;
            });
        }
    });

这里200是每个孩子之间的空间，10是每行的孩子数

显然这会使你的下一级别覆盖问题，因为你可以在每个级别上保存最后的最大Y和最大X并用作下一级别的起点，就像下一个代码一样

var tree1 = d3.layout.tree()
            .separation(function(a, b) {
                return a.parent === b.parent ? 1.5 : 1.5;
            })
            .nodeSize([150,200]);

        var _nodesData1 = tree1.nodes(_newRecordData[_x]);

        _nodesData1.forEach(function (d) {
           var _midpoint = d.x;
            var _newRowPoint = d.x - ( 170 * 3.5)
            var _countInRow = 7;
            var _k = 0;
            var previousTextLong = false;
            var previousDirection = 1;
            // if the node has too many children, go in and fix their positions to two columns.
            if (d.children && d.children.length > 8) {
                var _previousX = _newRowPoint;
                var _previousY = d.children[0].y;
                d.children.forEach(function (d, i) {
                    d.x = _previousX;
                    var s = 0;
                    if(previousTextLong){
                        s = 20*previousDirection;
                    }
                    d.y = _previousY + s;
                    if(d.name && d.name.length > 25){
                        previousTextLong = true;
                        previousDirection = previousDirection * -1;
                    }else{
                        previousTextLong = false;
                    }
                    _k++;
                    if(_k == 8){
                        _k = 0;
                        _previousX = _newRowPoint;
                        _previousY = _previousY + 200;
                    }else{
                        _previousX = _previousX + 170;
                    }
                });
            }
        });

我认为这可以为职位提供更多的自定义...我在一个图表中使用多个树布局，并在节点位置完成后管理它们......

将第n行中的子项拆分为每行的特定子项数

1 个答案: