motivasi:
Saya pertama kali berpikir untuk membuat pohon biner karena saya perlu membuat bagan struktur perusahaan. Pendekatan sebelumnya adalah menggambar secara langsung menggunakan software grafis. Kelihatannya bagus, tetapi Anda perlu mengecat yang baru setiap kali ada perubahan. Di sisi lain, tampilan dan tata letak garis pada halaman web cukup terbatas. Penyusunan huruf dan pemosisian berdasarkan data yang dihasilkan secara dinamis sangatlah sulit, dan estetikanya tidak memuaskan. Setelah melakukan berbagai upaya, saya memutuskan untuk menggunakan XML+XSL untuk operasi data; menggunakan VML untuk mempercantik garis, dan menggunakan JAVASCRIPT untuk memposisikan objek.
Bahan:
Diagram pohon struktur volume XML memiliki 2 file: flow2.xml dan flow2.xsl
Memengaruhi:
Telusuri di sini
menjelaskan:
Ide pohon biner (1)
<html xmlns:v="urn:schemas-microsoft-com:vml">
<GAYA>
v:* { PERILAKU: url(#default#VML) }
</GAYA>
<v:group id="group1" name="group1" coordsize = "100.100">
…
</v:grup>
Ini adalah format dasar VML, jadi saya tidak akan menjelaskannya secara detail.
XML adalah struktur pohon. Saat kita membaca setiap data, kita perlu melakukannya
Pohon data XML dilintasi. Operasi rekursif adalah salah satu keunggulan XSL.
Saya juga memutuskan untuk menggunakan XSL setelah menggunakan berbagai metode lain untuk melakukan operasi traversal dan gagal.
<Akar Aliran>
<vcTitle>Diagram struktur pohon biner</vcTitle>
<Penulis>Berlayar</Penulis>
<Email>[email protected]</Email>
<Node Aliran>
<iProses>1</iProses>
<vcCourse>Node pertama</vcCourse>
<iBerikutnyaYa>
<Node Aliran>
<iProses>2</iProses>
<vcCourse>Node kedua</vcCourse>
<iBerikutnyaYa>…</iBerikutnyaYa>
<iNextNo>…</iNextNo>
</Node Aliran>
</iBerikutnyaYa>
<iBerikutnyaTidak>
<Node Aliran>
<iProses>3</iProses>
<vcCourse>Node ketiga</vcCourse>
<iBerikutnyaYa>…</iBerikutnyaYa>
<iNextNo>…</iNextNo>
</Node Aliran>
</iBerikutnyaTidak>
</Node Aliran>
</FlowRoot>
Logikanya sangat sederhana. Ada dua node anak (2, 3) di bawah node saat ini (1).
Posisikan saja node 2 dan node 3 di kiri bawah dan kanan bawah node 1.
Disini saya menggunakan warna hijau dan merah untuk garis penghubung node kiri dan kanan masing-masing agar mudah ditampilkan.
Kita telah membicarakan tentang fungsi rekursif XSL sebelumnya. Untuk melihat setiap langkah tampilan detail dengan lebih jelas, Anda hanya perlu meniru kode berikut dan menambahkan pernyataan peringatan.
<xsl:templat pertandingan="FlowNode">
…
<Bahasa SKRIP = "JavaScript1.2">
…
alert('tampilkan langkah demi langkah');
…
</SKRIP>
…
</xsl:templat>
Setelah menyaksikan slow motion di atas, apakah anda dapat memahami pemikiran saya?
Ide pohon biner (2)
Ide saya sangat sederhana:
(1) Baca data node saat ini dan buat objek baru menggunakan VML.
Tetapkan nilai awal ke objek (seperti nama, id, gaya, dll.)
(2) Gunakan kontrol skrip untuk memposisikan objek saat ini. (3) Tambahkan panah dan garis antara node saat ini dan node induknya.
(4) Lanjutkan mencari node anak dari node saat ini dan ulangi hingga akhir.
Artinya, semua node telah dilintasi dan pohon telah dihasilkan.
<xsl:templat pertandingan="FlowNode">
…
<xsl:terapkan-templat />
…
</xsl:templat>
<xsl:templat pertandingan="iNextYes">
<xsl:apply-template pilih="./FlowNode" />
</xsl:template>
<xsl:template match="iNextNo">
<xsl:apply-template pilih="./FlowNode" />
</xsl:templat>
Seluruh proses rekursif diselesaikan oleh tiga modul (templat) di atas.
Templat pertama memanggil dua templat berikut ketika mencocokkan templat setiap simpul anak di simpul saat ini; dan dua templat terakhir memanggil templat pertama selama eksekusi tertentu, yang setara dengan fungsi rekursif.
tata bahasa:
Untuk mencocokkan template setiap node anak di node saat ini secara bergantian, gunakan bentuk dasar elemen <xsl:apply-templates />.
Jika tidak, node yang cocok ditentukan oleh nilai ekspresi XPath di parameter pilih, seperti <xsl:apply-templates select="./FlowNode" />
Fungsi (1) dan (2) adalah mengembalikan nilai string dari ekspresi yang diberikan oleh parameter pilih.
Kondisi pencariannya sama, sehingga nilai yang dikembalikan juga sama.
Hanya saja bentuk tulisannya berbeda-beda tergantung pada kesempatan penggunaannya.
(1) <xsl:nilai-dari pilih="./iProcess/text()" />
(2) {./iProses/teks()}
Beberapa variabel didefinisikan di sini, dan posisi node didasarkan pada variabel-variabel ini untuk memanggil rumus perhitungan.
root_left //Margin kiri dari root = lebar semua daun yang dialokasikan (y*10) + lebar semua daun (y*50) + nilai dasar margin kiri (10)
root_top //Margin atas dari root = nilai dasar margin atas (10)
objOval //Objek saat ini adalah sebuah objek
objOval_iProcess //Nilai langkah dari objek saat ini
objParentOval //Node induk dari objek saat ini adalah sebuah objek
objParentOval_iProcess //Nilai langkah dari node induk objek saat ini
objParent_name //Nama node induk objek saat ini
Leaf_left //Jumlah daun kiri di antara semua node anak dari objek saat ini
Leaf_right //Jumlah daun kanan di antara semua node anak dari objek saat ini
Leaf_sum //Jumlah daun di antara semua node anak dari objek saat ini.
Daun: mengacu pada node saat ini yang tidak memiliki node anak.
Rumus penentuan posisi node:
(1) Node saat ini adalah node akar
//Posisi akar
SobjOval.style.left=parseInt(root_left);
SobjOval.style.top=parseInt(root_top);
//Fungsi dari fungsi parseInt() adalah untuk mengambil nilai integer, jika tidak maka akan menjadi NAN
//Fungsi dari fungsi isNaN() adalah untuk menentukan apakah nilai yang diperoleh parseInt adalah bilangan bulat.
(2) Node saat ini adalah node anak kiri dari node induk
1) Syarat penilaiannya adalah: Nama node induk objek saat ini='iNextYes'
…
2) Jika ada anak daun yang tepat, rumusnya adalah:
Kiri node saat ini = kiri node induk - total lebar daun anak kanan dari node saat ini - lebar node saat ini
3) Jika tidak ada daun anak kanan, tetapi ada daun anak kiri , rumusnya adalah:
Kiri node saat ini = kiri node induk - total lebar daun anak kiri dari node saat ini
4) Jika node saat ini sendiri adalah daun, maka rumusnya adalah:
Kiri dari node saat ini = kiri dari node induk - lebar dari node saat ini...
(3) Node saat ini adalah node anak kanan dari node induk
1) Syarat penilaiannya adalah: Nama node induk objek saat ini='iNextNo'
…
2) Jika ada anak daun sebelah kiri maka rumusnya adalah :
Kiri node saat ini = kiri node induk + total lebar daun anak kiri dari node saat ini + lebar node saat ini
3) Jika tidak ada daun anak kiri, tetapi ada daun anak kanan , rumusnya adalah:
Kiri node saat ini = kiri node induk + lebar total daun anak kanan node saat ini
4) Jika node saat ini sendiri adalah daun, maka rumusnya adalah:
Kiri dari node saat ini = kiri dari node induk + lebar dari node saat ini...
Rumus (2) dan (3) keduanya mendapatkan bagian kiri dari node saat ini, dan kita juga perlu mendapatkan bagian atas dari node saat ini.
Rumus yang sangat sederhana: bagian atas simpul saat ini = bagian atas simpul induk + offset (80)
Ide pohon biner (3)
Memposisikan ide untuk menghubungkan garis:
(1) Carilah posisi simpul sekarang dan simpul induk (2) Tentukan apakah simpul sekarang merupakan simpul anak kiri atau simpul anak kanan dari simpul induk (3) Buatlah garis
Beberapa variabel didefinisikan di sini.
objOval //Node saat ini adalah sebuah objek
objParentOval //Node induk dari objek saat ini adalah sebuah objek
objLine //Baris saat ini adalah sebuah objek
Rumus penentuan posisi garis:
from="x1,y1" to="x2,y2" adalah cara memposisikan garis pada VML.
Node saat ini adalah node anak kiri dari node induk, maka rumusnya adalah:
dari = kiri node induk + offset (15), atas + offset node induk (32)
ke = kiri + offset (30) dari node induk, atas - offset (2) dari node induk.
Node saat ini adalah node anak kanan dari node induk, maka rumusnya adalah:
dari = kiri simpul induk + offset (35), atas simpul induk + offset (32)
ke = kiri simpul induk + offset (20), atas simpul induk - offset (2)
Hanya itu yang bisa saya pikirkan.
Akan lebih mudah jika kita membuat bagan struktur perusahaan saja.
Berikut ini adalah ide Cy Young, dan saya akan membahasnya lebih dalam lagi.
Pertama hitung jumlah node di tingkat bawah untuk mendapatkan lebarnya,
Posisi simpul atas dari simpul tersebut kemudian harus dihitung berdasarkan afiliasinya, secara rekursif.
Node pada setiap level harus diurutkan berdasarkan afiliasinya. Pertama, atur "nilai dasar" = node harus diimbangi ke kanan. Nilai kiri setiap node yang berisi node anak sama dengan setengah lebar node itu dimiliki ditambah nilai dasar.
Catatan tambahan:
Entah kenapa, internet akhir-akhir ini buruk. Habiskan lebih banyak waktu offline daripada online.
Oleh karena itu kodenya belum disederhanakan, sebenarnya masih banyak fungsi yang perlu diperbaiki, seperti:
Anda perlu menambahkan menu klik kanan. Menu klik kanan berisi kemampuan untuk membuat node baru, mengubah nama node, mengubah asosiasi, dll. Anda dapat mengklik kanan pada setiap node untuk membuka menu klik kanan node ini. .
menjelaskan:
1) flow2.xml adalah file data, saya yakin semua orang tidak akan mengalami masalah.
2) flow2.xsl adalah file berformat, ada beberapa hal yang perlu diperhatikan.
(1) Dalam skrip:
(1) <xsl:value-of select="./iProcess/text()" />;
(2) {./iProcess/text()}
Fungsi (1) dan (2) adalah mengembalikan nilai string dari ekspresi yang diberikan oleh parameter pilih.
Kondisi pencariannya sama, sehingga nilai yang dikembalikan juga sama.
Hanya saja bentuk tulisannya berbeda-beda tergantung pada kesempatan penggunaannya.
<xsl:apply-templates select="team" order-by="blue_ID"/>
Misalnya, kami ingin membuat kode berikut
<div name="parameter value">Konten</div>
Kami berasumsi bahwa namanya adalah "nama" dan nilai parameternya adalah nilai buku simpul anak di bawah simpul saat ini dalam data XML.
Cara penulisannya yang pertama adalah dengan menambahkan nama atribut terlebih dahulu baru kemudian nilai parameternya.
<div>
<xsl:nama atribut="nama">
<xsl:value-of select="./book/text()"/> </xsl:attribute>
isi
</div>
Cara penulisan yang kedua adalah dengan langsung menambahkan nama atribut dan nilai parameter
<div name="{./book/text()}">Konten</div>
Untuk penggunaan spesifik, Anda dapat melihat contoh pada kode yang saya tulis.
XSL ada dalam standar resmi xmlns:xsl=" http://www.w3.org/1999/XSL/Transform "
<xsl:value-of select="./book/text()"/>
Fungsinya : tinggal tulis nilai teksnya, dan
<xsl:nilai-dari pilih="./buku"/>
Ini menampilkan nilai teksnya dan konten dari semua node turunannya.
Anda dapat mencobanya dan menampilkan satu dengan node anak dan satu lagi tanpa node anak untuk melihat apakah hasil yang ditampilkan sama.
(2) Catatan:
IE5 tidak mendukung <tag att="{xpath}">
Ingin menggunakan
<tag><xsl:attribute name="att"><xsl:value-of select="xpath"></xsl:attribute>
perlu digunakan
xmlns:xsl=" http://www.w3.org/TR/WD-xsl "
<?xml version="1.0" coding="gb2312" ?>
Satu hal lagi:
Encoding="gb2312" jarang ditambahkan ke kode yang ditampilkan di sebagian besar buku teks XML.
Oleh karena itu, ketika kita menggunakan bahasa Mandarin dalam XML, kesalahan akan dilaporkan karena deklarasi ini tidak ditulis.
nota bene:
Yang saya bicarakan di sini adalah cara berpikir. Jika Anda menggambar analogi, tentu saja itu akan berguna.