d3 數據綁定

時間 2019-12-01

標籤 d3 數據綁定简体版

原文原文鏈接

綁定過程

選擇元素，綁定數據，追加元素

<!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標籤javascript

.data()將dataset裏面的數據和body下面的p標籤綁定在一塊兒，dataset有五個值，則數據集執行了五次，生成五個p標籤html

.enter()將數據傳遞到dom當中，若是dom數不足，則建立一個佔位符java

.append(),經過enter()建立的佔位符建立元素spring

.text()分別在新建立的p標籤當中插入文字app

相關文章

相關標籤/搜索

表關係綁定

D3.js數據可視化

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<