Basit bir d3.js ağ grafiği, DIV'leri düğüm olarak kullanarak nasıl kodlanır

D3'ün nasıl çalıştığını anlamakta zorlanıyorum. Sadece düğümler olarak düz DIV'leri (biçimlendirilmiş metin içeren) kullanarak basit bir ağ grafiği (canlandırma veya “kuvvet” etkisi olmadan) almak istiyorum. Düğümler için SVG kullanılmamalıdır.Basit bir d3.js ağ grafiği, DIV'leri düğüm olarak kullanarak nasıl kodlanır

DIV'leri örneğin olacaktır:

{ 
    "myDIVs":[ 
     {"name":"div1"}, 
     {"name":"div2"}, 
     {"name":"div3"}, 
     {"name":"div4"} 
    ], 
    "myLinks":[ 
     {"source":1,"target":2}, 
     {"source":1,"target":3}, 
     {"source":2,"target":1}, 
     {"source":4,"target":3} 
    ] 
}

ne olurdu: DIV öğeleri arasında

<div id="div1">One</div> 
<div id="div2"><b>Two</b></div> 
<div id="div3"><span style="color: red;">Three</span></div> 
<div id="div4"><p class="someclass">Four</p></div>

bağlantılar/düğümler (muhtemelen sözde JSON) böyle bir şey olacağını sağ D3 kodu?

kaynak

2016-03-19 JYF

Eğer mümkün istediğini iken, neden yerine burada 'html' divs'' çalışmak ve istiyoruz: Not, ben 0 tabanlı dizi indisleri için bağlantılarınızı değişti svg' düğümleri? Ağ grafikleri düğümleri arasında çizgiler var, svg olmadan bu satırları nasıl çizeceksiniz? – Mark

Haklısınız: düğümler düz eski DIV'ler olduğu sürece satırların SVG olduğunu düşünmüyorum. (Sadece sorumu buna göre düzenledim.) Ancak DIV-düğümleri ve SVG hatlarının karıştırılması mümkün mü, en azından D3 kullanarak mı? – JYF

Evet, önceden oluşturulmuş div'leri d3'ün force layout'u ve ardından SVG çizgileriyle karıştırmak mümkündür. Kesinlikle divleri konumlandırmanız gerekir. İşte HTML ve veri yapınızı kullanarak hızlı bir örnek.

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset='utf-8'> 
 
    <style> 
 
    .node { 
 
     fill: #ccc; 
 
     stroke: #fff; 
 
     stroke-width: 2px; 
 
    } 
 
    
 
    .link { 
 
     stroke: #777; 
 
     stroke-width: 2px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 

 
    <div id="div1">One</div> 
 
    <div id="div2"><b>Two</b></div> 
 
    <div id="div3"><span style="color: red;">Three</span></div> 
 
    <div id="div4"> 
 
    <p class="someclass">Four</p> 
 
    </div> 
 

 
    <script src='http://d3js.org/d3.v3.min.js'></script> 
 
    <script> 
 
    var width = 400, 
 
     height = 400; 
 

 
    var data = { 
 
     "myDIVs": [{ 
 
     "name": "div1" 
 
     }, { 
 
     "name": "div2" 
 
     }, { 
 
     "name": "div3" 
 
     }, { 
 
     "name": "div4" 
 
     }], 
 
     "myLinks": [{ 
 
     "source": 0, 
 
     "target": 1 
 
     }, { 
 
     "source": 0, 
 
     "target": 2 
 
     }, { 
 
     "source": 1, 
 
     "target": 0 
 
     }, { 
 
     "source": 3, 
 
     "target": 2 
 
     }] 
 
    }; 
 

 
    var nodes = data.myDIVs, 
 
     links = data.myLinks; 
 

 
    var svg = d3.select('body').append('svg') 
 
     .attr('width', width) 
 
     .attr('height', height); 
 

 
    var force = d3.layout.force() 
 
     .size([width, height]) 
 
     .nodes(nodes) 
 
     .links(links) 
 
     .linkDistance(250) 
 
     .charge(-50); 
 

 
    var link = svg.selectAll('.link') 
 
     .data(links) 
 
     .enter().append('line') 
 
     .attr('class', 'link'); 
 

 
    var node = d3.selectAll('div') 
 
     .data(nodes) 
 
     .each(function(d) { 
 
     var self = d3.select('#' + d.name); 
 
     self.style("position", "absolute"); 
 
     }); 
 

 
    force.on('end', function() { 
 
     node 
 
     .style('left', function(d) { 
 
      return d.x + "px"; 
 
     }) 
 
     .style('top', function(d) { 
 
      return d.y + "px"; 
 
     }); 
 

 
     link.attr('x1', function(d) { 
 
      return d.source.x; 
 
     }) 
 
     .attr('y1', function(d) { 
 
      return d.source.y; 
 
     }) 
 
     .attr('x2', function(d) { 
 
      return d.target.x; 
 
     }) 
 
     .attr('y2', function(d) { 
 
      return d.target.y; 
 
     }); 
 
    }); 
 
    
 
    force.start(); 
 
    for (var i = 0; i < 100; ++i) force.tick(); 
 
    force.stop(); 
 
    </script> 
 
</body> 
 

 
</html>

kaynak

2016-03-20 17:56:43 Mark

Çok teşekkürler. Grafiğin son haliyle gösterdiği gibi, "kuvvet" animasyonlarını tamamen devre dışı bırakmanın bir yolu var mı? Ayrıca, DIV'lerin çakışmasını önlemek için bir yol var mı? – JYF

@JYF, evet, yukarıdaki kod değişikliklerine bakın. Yine de, düğümlerin konumunu kontrol etmek istiyorsanız, bir kuvvet düzeninin en iyi düzen seçimi olmadığını öne sürüyorum. Belki bir [küme düzeni] (https://github.com/mbostock/d3/wiki/Cluster-Layout) daha uygundur. – Mark

Tekrar çok teşekkürler. İyi anlaşılırsam, küme yerleşimi tarafından üretilen dendogramlar, hiyerarşide bazı rasgele öğelerin başka bir rasgele öğeye (ki benim elde etmek istediğim bir şey) bağlı olmasına izin vermez. Ayrıca kodunuz tarafından üretilen DIV'lerin rastgele konumlarını da beğeniyorum. Çakışmaları önlemek için bir yol olmalı, hatta DIV'ler arasında minimum bir mesafe ayarlamalıdır, ancak bu düzeltmelerin D3 belgelerine gömüldüğünü varsayalım…? – JYF

Basit bir d3.js ağ grafiği, DIV'leri düğüm olarak kullanarak nasıl kodlanır

cevap

İlgili konular