Zeichnen von Linien zwischen Knoten mit CSS

Ich finde kaum richtige Worte, um die Herausforderung zu beschreiben, die ich in der Hand habe. Ich habe Knoten in Organigramm angeordnet. Ich möchte wissen, ob es eine Möglichkeit gibt, diese Knoten durch Linien zu verbinden, und diese Linien sollten dynamisch sein - mag es sein, sie mit CSS zu zeichnen, wäre der richtige Weg.Zeichnen von Linien zwischen Knoten mit CSS

Es sieht ähnlich wie in Bild gezeigt worden ist.

Zusammen mit Art und Weise zum Zeichnen von Linien, die Knoten verbindet ich glücklich sein würde, zu wissen, ob es eine effizientere Art und Weise ist es, diese Knoten dynamisch wie <ul> und <li> Struktur zu erzeugen.

Im Folgenden finden Sie den Code-Schnipsel habe ich verwendet das obere Bild zu erzeugen (die sehr geringe Nutzung von Bootstrap hat):

<!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>

Frage in aller Kürze:

bessere Art und Weise Knoten dynamisch
Wie zeichne Linien, um diese Knoten zu verbinden?

Quelle

2017-05-18 BeingSuman

zu handhaben https://codepen.io/siiron/pen/aLkdE –

Es gibt auch diese Option: ht tp: //fperucic.github.io/treant-js/ –

Ich würde mit SVG gehen.

Damit kann man so ziemlich alles, was Sie wollen, Linien enthalten, die CSS viel mehr Schwierigkeiten haben werden

Fiddle demo

Stapel Snippet

svg { 
 
    display: block; 
 
    margin: auto; 
 
    width: 100vmin; 
 
} 
 
.shadow { 
 
    -webkit-filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.5)); 
 
      filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.5)); 
 
} 
 
.line { 
 
    stroke: gray; 
 
} 
 
.ellipse { 
 
    fill: lightblue; 
 
} 
 
.circle { 
 
    fill: lightgreen; 
 
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="395" height="305" viewBox="0 0 395 305" class="shadow"> 
 
    <line x1="195" y1="70" x2="50" y2="200" stroke-width="1" class="line"/> 
 
    <line x1="195" y1="70" x2="195" y2="200" stroke-width="1" class="line"/> 
 
    <line x1="195" y1="70" x2="340" y2="200" stroke-width="1" class="line"/> 
 
     
 
    <ellipse cx="195" cy="70" rx="120" ry="70" class="ellipse"/> 
 
    <text x="50%" y="70" text-anchor="middle" dy=".3em">Some text...</text> 
 
    
 
    <circle cx="50" cy="250" r="50" class="circle"/> 
 
    <text x="50" y="250" text-anchor="middle" dy=".3em">Some text...</text> 
 
    
 
    <circle cx="195" cy="250" r="50" class="circle"/> 
 
    <text x="195" y="250" text-anchor="middle" dy=".3em">Some text...</text> 
 

 
    <circle cx="340" cy="250" r="50" class="circle"/> 
 
    <text x="340" y="250" text-anchor="middle" dy=".3em">Some text...</text> 
 
</svg>

Quelle

2017-05-18 14:33:10 LGSon

Zeichnen von Linien zwischen Knoten mit CSS

Antwort

Verwandte Themen