d3對dom的操作 · d3js入門

# d3對dom的操作 ## 查找selection selection使用類似與jquery的$()選擇在使用上有.: - `.select()` 選擇一個 - `.sleectAll()` 選擇一組例如以下文檔結構 ``` html <!DOCTYPE html> <html lang="en"> <head> </head> <body> <div id="a1" class="s1"> <div id="b1"> <div id="c1" class="s1"></div> </div> <div id="b2"> <div id="c2" class="s1"></div> </div> <div id="b3"> <span id="c3"></span> </div> </div> <div id="A1" class="s1"></div> </body> </html> ``` 操作實例如下： ``` js d3.select('#a1').select('div') //將會選中id為b1的div d3.select('#a1').selectAll('div') //將會選中id為b1,b2,b3的三個div d3.select('#a1').selectAll('.s1') //將會選中id為c1,c2的兩個div ``` 思考：d3.selectAll('.s1')選中了哪些div？ ## 創建create create有兩種方式： - `.append()` 追加 - `.insert()` 插入例如以下文檔結構 ``` html <!DOCTYPE html> <html lang="en"> <head> </head> <body> <div id="a1" class="s1"> <div id="b1"> <div id="c1" class="s1"></div> </div> <div id="b2"> <div id="c2" class="s1"></div> </div> <div id="b3"> <span id="c3"></span> </div> </div> <div id="A1" class="s1"></div> </body> </html> ``` ``` js d3.select('a1').append('div') //將會在id為b3后面創建一個div d3.select('a1').insert('div') //將會在id為b1前面創建一個div ``` 思考：d3.selectAll('.s1').insert('div')將會如何創建div？ ## remove 刪除節點和selection幾乎一樣，.remove()和.removeAll().所以不再贅述。 ## 綁定數據綁定數據的實質是將數據賦值到對應dom的property的`__data__`屬性上。兩種方式： - `.data()` //將數組的子元素依次綁定到選擇的dom中 - `.datum()` //將數據全部分別綁定到選擇dom中 ``` html <!DOCTYPE html> <html lang="en"> <head> </head> <body> <div id="a1" class="s1"> <div id="b1"> <div id="c1" class="s1"></div> </div> <div id="b2"> <div id="c2" class="s1"></div> </div> <div id="b3"> <span id="c3"></span> </div> </div> <div id="A1" class="s1"></div> </body> </html> ``` ``` js d3.select('#a1').selectAll('div').data([1,2,3,4,5,6]) // 會為#b1綁定1，會為#b2綁定2，會為#b3綁定3 d3.select('#a1').selectAll('div').datum([1,2,3,4,5,6]) // 會為#b1,b2,b3均綁定[1,2,3,4,5,6] ``` 問題來了？data綁定數據時數據數組過長，我想選中有數據沒有dom的呢？如果數據數組過短，只有dom沒有數據如何選中？那就是接下的操作： - `.enter()` //選中只有數據沒有dom的部分。其后面常跟隨.append('div')，這里創建后數據是綁定了的。 - `.exit()` //選中的是只有dom沒有數據的部分，其后面跟什么？.removeAll(); - `.merge(selectionA)` //將選中集與selectionA合并成新的選擇集 ``` javascript /** *data為數組 */ update(dataSet){ var root=d3.select('div'); var divs = root.selectAll('div') .data(dataSet) //刪除沒有數據的dom divs.exit().remove() //為有數據沒有dom的添加dom，并將有數據有dom的合并在一起，修改class divs.enter().append("div") .merge(divs) .attr("class",function(d){return 's'+d}) } ``` 思考：假如傳遞一個[1,2,3,4,5,6]會得到什么樣的結構？ ## 其他常見操作 - `.html()` 插入html代碼 - `.text()` 插入文本 - `.on()` 添加事件監聽 - `.filter()` 過濾 - `.stytle()` 修改/獲取樣式 - `.each()` 遍歷 - `.node()` 返回dom對象 - `.nodes()`返回dom對象集等等，在以后源碼中遇到再補充，其余的請參考官方文檔。