如何为d3.js这样的网格更好地布局

Question

我绘制了带有关联的项目，但不幸的是，安排它们并不太成功。 现在我有这张照片：

我设法按组排列，但是不可能将相互连接的元素放在一行上。 但是我想得到这个选项：

这是当前代码：

var json = {
    "nodes": [
        {"group": 1, "featureId": "pMeter_StartSetId", "trigger": "trigger1"},
        {"group": 1, "featureId": "pMeter_ResetSetId", "trigger": "trigger2"},
        {"group": 1, "featureId": "fS___startFSPopup", "trigger": "trigger3"},
        {"group": 1, "featureId": "reSpins_stRSPopup", "trigger": "trigger4"},
        {"group": 1, "featureId": "jackpotIndication", "trigger": "trigger5"},
        {"group": 1, "featureId": "jackpotShowPopup", "trigger": "trigger6"},
        {"group": 2, "animId": "jI_UpdateIndicators"},        
        {"group": 2, "animId": "jI_JackpotShowPopup" },
        {"group": 2, "animId": "progressiveMeter_UpdateIndicators"},
        {"group": 2, "animId": "progressiveMeter_ResetSetFunc"},
        {"group": 2, "animId": "startFreeSpinsPopup"},
        {"group": 2, "animId": "startRespinsPopup"}
    ],
    "links": [
        {"source": 0, "target":  5 },
        {"source": 2, "target":  7 },
        {"source": 4, "target":  9 },
        {"source": 6, "target":  11},
        {"source": 8, "target":  1 },
        {"source": 10, "target": 3 }
    ]
}

    var main_row = svg.selectAll("g")
        .data(json.nodes)
        .enter()
        .append('g')
        .attr("x", 50).attr("y", 50)
        .attr("width", 160)
        .attr("height", 80)
        .append("rect")
            .attr("x", 50).attr("y", 50)
            .attr("width", 16)
            .attr("height", 80)
            .style("fill","black");

    var simulation = d3.forceSimulation(json.nodes)
        .force("link", d3.forceLink(json.links).distance(300).strength(1))
        .force("center", d3.forceCenter().x(width / 2).y(height / 2)) 
        .force("charge", d3.forceManyBody().strength(1)) 
        .force("collide", d3.forceCollide().strength(.1).radius(32).iterations(1))
        .force("x", d3.forceX().strength(0.5).x( d => x(d.group) ))
        .force("yPosition", d3.forceY(d => d.r === 20 ? 100 : 300))
        .force("xPosition", d3.forceX(d => d.r === 20 ? 100 : 300))
        .force("y", d3.forceY().strength(0.1).y( height/2 ))
        .on("tick", ticked);

    function ticked() {
        link.attr("x1", d => d.source.x + dx)
            .attr("y1", d => d.source.y + dy)
            .attr("x2", d => d.target.x + dx)
            .attr("y2", d => d.target.y + dy);
        main_row.attr("transform", d => "translate(" + d.x + "," + d.y + ")" );

    }