D3 yardımıyla DOM Manipülasyonu

Hello friends. In this location I will show you DOM manipulation using D3.

İmagesource

Bu postum da , D3, d3.select () veya d3.selectAll () öğelerini seçtikten sonra kullanabileceğiniz aşağıdaki DOM işleme yöntemlerini içerir.

Yöntemler

text ("content")= Seçili öğenin metnini alır ve düzenler.
append ("element name")= Seçilen öğenin içine, seçilen öğenin bitiminden hemen önce bir öğe ekleyebilir.
insert ("eleman adı")= Seçilen elemana yeni bir eleman ekleyebilir.
remove ()= Belirtilen öğeyi DOM'dan siler.
html ("content")= Seçilen öğenin iç HTML'sini alır ve düzenler.
attr ("name", "value")= Seçili öğedeki bir niteliği alır ve düzenler.
property ("name", "value")= Seçilen öğe üzerinde bir öz niteliği alır ve düzenler.
style ("name", "value")= Seçilen öğenin stilini alır ve düzenler.
classed ("css class", bool)= Seçimlen öğeden bir css sınıfı alır, ekler veya kaldırır.

Hepsini inceleyelim.

text()

Seçilen öğelerin metin içeriğini eklemek veya değiştirmek için "d3.selection.text ()" yöntemini kullanabilirsiniz.

<script>
        d3.select("p").text("Bu bir paragraf yazısıdır.")
</script>

Yukarıdaki örnekte, "d3.select ("p")" kullanarak div içindeki ilk eşleşen p öğesini seçiyoruz. P öğesi seçildikten sonra ".text ("Bu bir paragraf yazısıdır.")" , "Bu paragraf" metnini seçili paragraf öğesine eklediğini görüyoruz.

UYARI; "d3.select ()" yöntemini kullandığımıza dikkat ediniz, yalnızca ilk eşleşen öğeye metin ekleyecektir. "D3.selectAll ()" yöntemini kullanırsak, tüm p öğelerine metin ekleyecektir.

append()

Yeni bir DOM öğesi oluşturabilmek ve seçili DOM öğesinin sonuna öğe eklemek için "d3.selection.append ()" yöntemini kullanalım.

<script>
        d3.select("body").append("p");
 </script>

Yukarıdaki örneğimizde, "d3.select ("body")" gövde elemanı döndürülür ve ".append ("p")" yeni bir p elemanı oluşturulur ve onu "" sonundan hemen önce ekler. Geliştirici konsolunu açın ve yeni boş p öğesi görürsünüz. "Metin ()" yöntemini kullanarak aşağıda gösterildiği gibi yeni öğeye metin ekleyebilirsiniz.

<script>
       d3.select("body").append("p").text("Third paragraph.");
</script>

Yukarıdaki örneğimizde D3, "Third paragraph." metniyle yeni bir p öğesi oluşturur. Ve biten gövde etiketinin önüne "" ekler.

insert()

Yeni bir öğe oluşturmak istiyorsanız "d3.selection.insert ()" yöntemini kullanın ve biten etiketinden önce seçili öğeye ekleyin.

<script>
        d3.select("div").insert("p").text("Second paragraph.");
</script>

Yukarıdaki örneğimizde, "d3.select ("div")" div öğesini seçer. Daha sonra, ".insert ("p")" yeni p ​​öğesi oluşturur ve "div" etiketinin hemen öncesinde ekler. "insert("Second paragraph.")", eklenen p öğesinin metnini düzenler.

remove()

Seçilen DOM öğelerini silmek istiyorsanız "d3.selection.remove ()" yöntemini kullanabilirsiniz.

<script>
        d3.select("p").remove();
</script>

Yukarıdaki örneğimizde, başlangıçta iki adet p öğesi vardı, "d3.select ("p")" ilk önce p öğesini ve ".remove ()" öğesi belgeden siler.

html ()

"D3.selection.html ()" yöntemi seçilen öğelerin iç html'lerini düzenler.

<script>
        d3.select("p").html("This was added in HTML");
</script>

Yukarıdaki örneğimizde, "d3.select ("p")" paragraf öğesini seçer. ".html("This was added in HTML ")" , seçili p ​​öğesinin iç html'inin yerini alır. Bu nedenle, orijinal HTML 'First paragraph' yerine "This was added in HTML" ile değiştirilir.

attr():

Seçilen DOM öğelerinde ki nitelikleri uygulamak ve düzenlemek için "d3.selection.attr ()" yöntemini kullanabilirsiniz.

<script>
        d3.select("p").attr("class","error");
 </script>

Yukarıdaki örneğimizde , "d3.select ("p")", p öğesini seçer ve ".attr ("class", "error")" sınıf öz niteliğini paragraf öğesine uygular. Seçilen herhangi bir DOM öğesine geçerli bir öz nitelik atamak için "attr ()" yöntemini kullanabilirsiniz.

property()

Bazı öğelerin nitelikleri, seçilen DOM öğelerine nitelikler uygulamak için "property ()" yöntemini kullanın.

<script>
    d3.select("input").property("checked",true);
</script>

Yukarıdaki örneğimizde, "d3.select ("input")" ilk "" öğesini ve ".property ("checked", true) " işaretli öz niteliğini onay kutusu öğesine uygular.

style()

Seçilen öğelere belirtilen isim ve değerle stil niteliğini uygulayabilmek için "d3.selection.style ()" yöntemini kullanabilirsiniz.

<script>
        d3.select("p").style("color", "red")
</script>

style() yöntemi ile seçime stiller eklemek için kullanabilirsiniz. Bu örneğimiz de, "d3.select ("p")" p öğesini seçer, style("color", "red") kırmızı bir yazı tipi rengi p öğesine ekler.

classed()

Sınıf öz niteliğini ayarlamak veya "classList" özelliğini seçilen öğelerle değiştirmek için "d3.selection.classed ()" yöntemini kullanabilirsiniz.

 <script>
        d3.select("p").classed('error', true);
 </script>

Bu örneğimizde "d3.select ("p")" p öğesini seçer ve daha sonra sınıflandırılmış "('myclass', true)" sınıf 'error' öğesini seçilen p öğesine uygular. Sınıflandırılmış yöntemdeki ikinci özellik Boolean'dır. "True" değerini geçerse, sınıfı seçilen öğeye ekler; "false" ise, sınıfı seçilen öğeden kaldırır.

---

Posted on Utopian.io - Rewarding Open Source Contributors

---