d3 數據綁定
阿新 • • 發佈：2017-05-22
dataset 追加 page span blog rip oct body log
綁定過程
選擇元素，綁定數據，追加元素
<!DOCTYPE html> <html> <head> <title>testD3-1.html</title> <script type="text/javascript" src="http://localhost:8080/spring/js/d3.js"></script> </head> <body> This is my HTML page. <br> </body> <script type="text/javascript"> var dataset = [ 5, 10, 15, 20, 25 ]; d3.select("body").selectAll("p") .data(dataset) .enter() .append("p") .text("New paragraph!"); </script> </html>
選中body下面的所有p標簽，如果p標簽為空，會根據後面綁定的數據添加相應的p標簽
.data()將dataset裏面的數據和body下面的p標簽綁定在一起，dataset有五個值，則數據集執行了五次，生成五個p標簽
.enter()將數據傳遞到dom當中，如果dom數不足，則創建一個占位符
.append(),通過enter()創建的占位符創建元素
.text()分別在新創建的p標簽當中插入文字
d3 數據綁定