如何从json构造具有连接线的盒子

Question

我试图用给定的json动态绘制一条线。

我听说可以用flexbox轻松完成。

注意：非常欢迎使用flexbox的解决方案

这是我所期待的：

我有这个json：

var path = [
  [{name:"S",color:"blue",parent:true}]
  [{name:"A",color:"blue"},{name:"B",color:"blue"},{name:"C",color:"blue"}],
  [{name:"D",color:"blue"},{name:"E",color:"blue"}],
  [{name:"E",color:"blue"},{name:"F",color:"blue"}]
]

试过这样的事情：

.container{
  display:flex;
  max-width:1200px;
  margin-top:100px;
  justify-content:center;
  margin-left: 214px;
}
.container .items{
  padding: 40px 70px;
  border:1px solid rgba(15,30,200,.6);
  margin-right: 90px; 
}

.line{
  flex:1;
  position:relative;
  left:40px;
  width:100px;
  border-top:1px solid red;
  display:inline-block;
}

.line {
    flex: 1;
    position: relative;
    left: 161px;
    width: 91px;
    border-top: 1px solid rgba(15,30,200,.6);
    display: inline-block;
}

<div class="container">
  
  <div class="items"><span class="line"></span>A</div>
  <div class="items"><span class="line"></span>B</div>
  <div class="items"><span class="line"></span>C</div>
  <div class="items">D</div>
</div>

请提前帮助我!!!!!!!!!

Answer 1

这是使用CSS和JavaScript完成它的一种方法。您需要HTML中的容器元素，数据对象以及CSS和JavaScript函数完成剩下的工作。

我用另一个“root”扩展了你的示例数据，以便显示它给出了什么：

function drawPath(selector, path) {
    function draw(directions) {
        return $("<div>").addClass(directions).append($("<div>"),$("<div>"),$("<div>"),$("<div>"));
    }

    let lineNo = -1;
    let lines = [];
    for (let row of path) {
        line = [];
        lineNo++;
        for (let obj of row) {
            if (obj.parent) lineNo = 0;
            line.push(draw("east west"), $("<div>").addClass("box").text(obj.name));
        }
        if (!lineNo) {
            lines.push(line.slice(1));
        } else if (lineNo == 1) {
            lines[lines.length-1] = lines[lines.length-1].concat(line);
        } else {
            lines[lines.length-1][1].addClass("south");
            lines.push([$("<div>"), draw("north west")].concat(line.slice(1)));
        }
    }
    let length = lines.reduce((len, line) => Math.max(len, line.length), 0);
    let pct = (100/length-0.01).toFixed(2);
    // pad lines to the longest length
    lines = lines.map(line => Array.from({length}, (_, i) => line[i] || $("<div>")));
    // flatten
    let $elems = $([].concat(...lines).map(jq => jq.css({flexBasis: pct + "%"}).get(0)));
    $(selector).append($elems);
}

// Demo
var path = [
    [{name:"S",color:"blue",parent:true}],
    [{name:"A",color:"blue"},{name:"B",color:"blue"},{name:"C",color:"blue"}],
    [{name:"D",color:"blue"},{name:"E",color:"blue"}],
    [{name:"E",color:"blue"},{name:"F",color:"blue"}],
    [{name:"S",color:"blue",parent:true}],
    [{name:"A",color:"blue"},{name:"B",color:"blue"},{name:"C",color:"blue"},{name:"D",color:"blue"},{name:"E",color:"blue"}],
    [{name:"E",color:"blue"},{name:"F",color:"blue"}]
];

drawPath(".container", path);

.container {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    color: rgba(15,30,200,.6);
}
.container>* {
    flex: 0 0;
    box-sizing: border-box;
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    height: 50px;
}
.box {
    border: 1px solid;
    height: 30px;
    margin-top: 10px;
    margin-bottom: 10px;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}
.container>div>div {
    flex: 0 0 50%;
    height: 50%;
    box-sizing: border-box;
}
.north>div:first-child {
    border-right: 1px solid;
}
.south>div:nth-child(3) {
    border-right: 1px solid;
}
.east>div:first-child {
    border-bottom: 1px solid;
}
.west>div:nth-child(2) {
    border-bottom: 1px solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container"></div>