0
私が手にしている課題を記述する正しい言葉はほとんど見つかりません。私はノードを組織図のように配置しています。私は、ラインを介してこれらのノードを接続する方法があるかどうかを知りたいのですが、これらのラインは動的でなければなりません。CSSを使用してノード間に線を描く
物事はPICに示されているものと似ています。
ノードを接続する線を描くのに加えて、<ul>と<li>構造のようなノードを動的に生成するより効率的な方法があるかどうかを知ってうれしいです。続い
iが（ブートストラップの非常に最小限の使用を有する）画像上に生成するために使用したコードスニペットである：一言で言えば
<!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>
質問：動的ノードを生成する
- 良い方法
- これらのノードを結ぶ線を描くにはどうすればよいですか？
スニペット
Fiddle demo
を処理するためにはるかに困難を持つことになります行が含ま
あなたが望むほとんど何でも行うことができますして、 https://codepen.io/siiron/pen/aLkdE –
このオプションもあります：ht tp：//fperucic.github.io/treant-js/ –