Javascript 每排第n排儿童数

我正在研究D3.js的树布局。这是一个简单的树布局，但每个节点都有8到9个孩子

所以，若我将每行设置为3个子节点，那个么我需要将子节点分成几行，若节点有7个子节点，那个么节点下会有3行，3，1个子节点，就像图中一样

我试过了，但它只是改变了两列的x，y位置，也就是当子节点有孙子节点时，节点彼此重叠

我现在正在深入研究……如果有任何一个解决方案比最受欢迎

---

我已经解决了这个问题，但我忘了发布答案

如果要按行拆分，请在树之后管理自己的布局

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

---

我认为这会给职位带来更多的定制。。。我在一个图中使用多个树布局，并在节点位置确定后对其进行管理

听起来你需要一个自定义的布局。树布局将是一个很好的开始。我已经使用了树布局，并且能够在下一行中移动子节点，但是如果在x轴中存在与父节点平行的节点，则会走得太远。我尝试了深度*I%3的x位置。您编写了哪些代码？你试过什么？请不要问基本上是要求人们为你写一个解决方案的“问题”。如果现有的D3.js布局不能满足您的需要，您需要理解D3.js并编写JavaScript代码来更改它。完成此操作并陷入困境后，您可以问一个包含代码的问题。我通过自己的_nodesData.forEachfunction d{d.y=d.depth*220；//如果节点有太多子节点，请进入并将其位置固定到两列。//如果d.children！=null | d.children.length>10{如果d.children{d.children.forEachfunction d，i{d.x=d.parent.x-d.parent.children.length-1*200/30+d.parent.children.indexOfd*200/10-i%10*100；}；}；