İçindekiler
Bu eklentinin aradığı yer burası uzay ağacı içinde geliştirildi Javascript organizasyonel yapılardan veya bilgi dizinlerinden bilgileri dinamik ve sezgisel bir şekilde bir ağaç şeklinde görüntülememize izin verir. uzay ağacı yapar.
- 1- İlk önce kendimizi oluşturuyoruz JSON, ağacımızda görüntülenecek tüm verileri içerecek olan kişidir, doğru yapıyı kurmaya ve baba-oğul ilişkisini sürdürmeye özen göstermeliyiz. JSON.
kimlik: "düğüm02",
isim: "0.2",
veri: {},
çocuklar: [{
kimlik: "düğüm13",
isim: "1.3",
veri: {},… .
- 2 - Bileşenin örneğini oluşturuyoruz uzay ağacı ve onu bir seçiciyle ilişkilendiririz, bu durumda bir öğenin kimliği:
var st = new $ jit.ST ({
injectInto: 'infovis',…
- 3 - Animasyonun süresi ve her bir ebeveyn düğüm ile onun çocuğu arasındaki mesafe gibi bazı ek seçenekler ekledik:
süre: 800,
geçiş: $ jit.Trans.Quart.easeInOut,
seviyeMesafe: 50,
- 4 - Ardından düğümler ve eksenler için stili belirledik; Dikdörtgenden dairesele kadar değişebilen yükseklik, uzunluk, renk ve şekil türü, her düğümün ayrı bir stile sahip olması seçeneğinden bahsetmek önemlidir. geçersiz kılınabilir değere sahip olmalı NS:
Verme: {
yükseklik: 20,
genişlik: 60,
tür: 'dikdörtgen',
renk: '#aaa',
geçersiz kılınabilir: doğru
},
Köşe: {
tip: 'bezier',
geçersiz kılınabilir: doğru
},
- 5 - Yöntem ile onCreateLabel Her düğümdeki etiketlere stiller atayabilmenin yanı sıra, ağacımızın tüm olaylarını ve işleyicilerini atadık:
onCreateLabel: işlev (etiket, düğüm) {
etiket.id = düğüm.id;
label.innerHTML = düğüm.adı;
etiket.onclick = işlev () {
if (normal.kontrol edildi) {
st.onclick (node.id);
} Başka {
st.setRoot (node.id, 'animate');
}
};
var stil = etiket.stil;
stil.width = 60 + 'px';
stil.yükseklik = 17 + 'px';
style.cursor = 'işaretçi';
style.color = '# 333';
style.fontSize = '0.8em';
style.textAlign = 'merkez';
style.paddingTop = '3px';
},
- 6 - Yöntem ile onBeforePlotNode bir düğümün özellikleri, örneğin konumuna veya kaç çocuğu olduğuna bağlı olarak bir düğümün renginin değiştirilmesi gibi çizilmeden önce değiştirilir.
onBeforePlotNode: işlev (düğüm) {
if (düğüm.seçili) {
düğüm.veri $ renk = "# ff7";
}
Başka {
node.data'yı sil $ renk;
if (! node.anySubnode ("vardır")) {
var sayısı = 0;
node.eachSubnode (işlev (n) {sayım ++;});
node.data $ color = ['#aaa', '#baa', '#caa', '#daa', '#eaa', '#faa'] [sayı];
}
}
},
- 7 - Yöntem ile onBeforePlotLine eksenlerin özellikleri çizilmeden önce değiştirilir:
onBeforePlotLine: işlev (sıf) {
if (adj.nodeFrom.selected && adj.nodeTo.selected) {
adj.data.$ color = "#eed";
adj.veri $ lineWidth = 3;
}
Başka {
adj.data'yı sil $ renk;
adj.data'yı sil $ lineWidth;
}
}
});
- 8 - Sonunda JSON verilerini yüklüyoruz:
Nihai sonuç aşağıdaki gibi olacaktır:
var st = new $ jit.ST ({injectInto: 'infovis', süre: 800, geçiş: $ jit.Trans.Quart.easeInOut, levelDistance: 50, Navigasyon: {enable: true, panning: true}, Düğüm: { yükseklik: 20, genişlik: 60, tür: 'dikdörtgen', renk: '#aaa', geçersiz kılınabilir: doğru}, Kenar: {tür: 'bezier', geçersiz kılınabilir: doğru}, onBeforeCompute: işlev (düğüm) {Log.write ("loading" + node.name);}, onAfterCompute: function () {Log.write ("done");}, onCreateLabel: function (etiket, düğüm) {label.id = node.id; label.innerHTML = node.name; label.onclick = function () {if (normal.checked) {st.onclick (node.id);} else {st.setRoot (node.id, 'animate');}}; var style = etiket.style; style.width = 60 + 'px'; style.height = 17 + 'px'; style.cursor = 'işaretçi'; style.color = '# 333'; style.fontSize = '0.8em'; style.textAlign = 'center'; style.paddingTop = '3px';}, onBeforePlotNode: function (düğüm) {if (node.selected) {node.data. $ color = "# ff7";} else {delete node. $ color; if (! node.anySubnode ("exist")) {var count = 0; node.eachSubn ode (fonksiyon (n) {sayım ++; }); node.data.$ color = ['#aaa', '#baa', '#caa', '#daa', '#eaa', '#faa'] [sayı]; }}}, onBeforePlotLine: function (adj) {if (adj.nodeFrom.selected && adj.nodeTo.selected) {sıf.veri.$ color = "#eed"; adj.veri $ lineWidth = 3; } else {delete adj.veri $ renk; adj.data'yı sil $ lineWidth; }}}); st.loadJSON (json); st.compute(); st.geom.translate (yeni $ jit.Complex (-200, 0), "geçerli"); st.onclick (st.root); Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.
