Question

我很难找到正确的词语来描述我手头的挑战。我有一组以组织结构图方式排列的节点。我想知道是否有办法通过线连接这些节点，这些线应该是动态的 - 可能是使用CSS绘制它们是正确的方法。

事情看起来与图片中显示的相似。

除了绘制连接节点的线条之外，我很高兴知道是否有更有效的方式来动态生成这些节点，如<ul>和<li>结构。

以下是我用于生成上面图片的代码片段（其使用Bootstrap的次数非常少）：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
        <title>Oval</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <style type="text/css">
            body{
                padding-top: 20px;
            }

            .oval {
                width: 400px;
                height: 160px;
                background: #5fa2dd;
                border-radius: 50%;
                text-align: center;
            }

            .circle {
                width: 190px;
                height: 190px;
                background: #9cc96b;
                border-radius: 50%;
            }

            .emptyrow{
                margin : 50px 0;
            }

            .med-circle{
                width: 150px;
                height: 150px;
                background: #9cc96b;
                border-radius: 50%;
            }
        </style>
    </head>
    <body class="container">
        <div class="row">
            <div class="col-lg-4 col-lg-offset-4 oval"><p>key1 : value1</p><p>key2 : value2</p><p>key3 : value3</p></div>
        </div>
        <div class="row emptyrow">
        </div>
        <div class="row">
            <div class="col-lg-2 col-lg-offset-2 circle"></div>
            <div class="col-lg-2 col-lg-offset-2 circle"></div>
            <div class="col-lg-2 col-lg-offset-2 circle"></div>
        </div>
    </body>
</html>

简而言之：

动态生成节点的更好方法
如何绘制线条来连接这些节点？

Answer 1

我会选择SVG。

有了它，你可以做任何你想要的东西，包括行，哪些CSS将有更多的难以处理

Fiddle demo

Stack snippet

/www/admin

<IfModule mod_rewrite.c>
    RewriteEngine on

    RewriteCond %{HTTP_HOST} ^admin\.domain\.kz$ [NC]
    RewriteRule ^ - [L]

    RewriteRule    ^$    webroot/    [L]
    RewriteRule    (.*) webroot/$1    [L]
</IfModule>

使用CSS在节点之间绘制线条

1 个答案: