上篇成功在vue項目中把d3跑起來了,接下來對d3的基本操作做個匯總:
一、d3元素選擇器
d3.select(".skill"):選擇第一個類名為skill的元素並返回這個元素對象(實現鏈式語法)
d3.selectAll("p"):選擇所有的p標簽並返回這些元素對象(實現鏈式語法)
d3.select(".skill").select("p"):選擇第一個類名為skill元素下的所有p標簽
二、d3數據綁定
這里是通過datum()來為節點綁定數據,注意這里綁定數據只是綁定,如果不輸出的話頁面是沒有效果的,我們可以看到在數據輸出的函數text()里面有個匿名函數,其中有兩個函參,i表示操作對象(這里是arr)項數的索引(這對選擇指定元素很有幫助),d表示之前為其綁定的數據;
經過測試datum()函數將會把參數綁定到每個節點對象上,也就是說每個對象綁定的數據都是一樣的,無論參數是字符串還是數組(親測,放入數組的話,直接綁定的是數組各項相加)
結果:
換成data()
結果:
所以,批量綁定相同數據使用datum(),不同節點綁定不同數據使用data()!!!
三、為指定元素執行操作
方法很多,比如為那個元素添加id、class,但是我們應當用好上面所說的索引i,怎么用,看例子:
很簡單是不是,所以,盡情地發散你的編程思維吧。
四、元素插入