d3.js入門之DOM操作


上篇成功在vue項目中把d3跑起來了,接下來對d3的基本操作做個匯總:

一、d3元素選擇器

d3.select(".skill"):選擇第一個類名為skill的元素並返回這個元素對象(實現鏈式語法)

d3.selectAll("p"):選擇所有的p標簽並返回這些元素對象(實現鏈式語法)

d3.select(".skill").select("p"):選擇第一個類名為skill元素下的所有p標簽

二、d3數據綁定

image.png

這里是通過datum()來為節點綁定數據,注意這里綁定數據只是綁定,如果不輸出的話頁面是沒有效果的,我們可以看到在數據輸出的函數text()里面有個匿名函數,其中有兩個函參,i表示操作對象(這里是arr)項數的索引(這對選擇指定元素很有幫助),d表示之前為其綁定的數據;

經過測試datum()函數將會把參數綁定到每個節點對象上,也就是說每個對象綁定的數據都是一樣的,無論參數是字符串還是數組(親測,放入數組的話,直接綁定的是數組各項相加)

image.png

結果:

image.png

換成data()

image.png

結果:

image.png

所以,批量綁定相同數據使用datum(),不同節點綁定不同數據使用data()!!!

三、為指定元素執行操作

方法很多,比如為那個元素添加id、class,但是我們應當用好上面所說的索引i,怎么用,看例子:

image.png

image.png

很簡單是不是,所以,盡情地發散你的編程思維吧。

四、元素插入


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM