【D3.V3.js系列课程】-（三）数据绑定-JavaSript-爱易网页

【D3.V3.js系列课程】-（三）数据绑定

日期：2014-05-16　浏览次数：20321 次

【D3.V3.js系列教程】--（三）数据绑定

1、D3可以处理哪些类型的数据

它会接受几乎任何数字数组，字符串，或对象（本身包含其他数组或键/值对）。
它可以处理JSON和GeoJSON
甚至有一个内置的方法来帮助你CSV文件中加载数据。

2、我们要做两件事：数据准备；元素选择。

<!DOCTYPE html>
<html>
  <head>
    <title>testD3-1.html</title>
<script type="text/javascript" src="http://localhost:8080/spring/js/d3.v3.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>

3、说明

d3.select("body")
查找DOM中的body和准备链中的下一个步骤的参考。

selectAll("p")
选择DOM中的所有段落。由于没有存在，这将返回一个空的选择。这个选择为空，代表段落很快就会存在。

data(dataset)
计数和分析我们的数据值。有五个值，之后我们的数据集执行了5次，每个值一次。

enter()
要创建新的数据绑定的元素，你必须使用enter() 。这个方法会在DOM中，然后被传递给它的数据。如果有更多的数据值比相应的DOM元素，然后进入（）创建一个新的占位符元素，关闭的引用到这个新的占位符链中的下一个步骤。

append("p")
以占位符enter() 到DOM中插入一个p元素。

text("New paragraph!")
将新创建的p和插入一个文本值的参考。

4、效果

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。