D3.js学习02_数据绑定data

来源：互联网发布：php日志系统编辑：程序博客网时间：2024/05/16 08:46

D3可以将数据集与元素集进行绑定。

datum()：绑定一个数据到选择集上

data()：绑定一个数组到选择集上，数组的各项值分别与选择集的各元素绑定

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Demo2</title><script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script><link href="css_demo1.css" rel="stylesheet" type="text/css" /></head><body><script type="text/javascript">      var dataset=[1,3,5];  var p=d3.select("body").selectAll("p");//找到所有的段落元素,其实并没有找到  p.data(dataset)//一对一绑定  .enter()//占位.append("p")//添加段落节点.text(function(x){//利用匿名函数添加文本节点var tx="";var i=0;while(i<x){tx+="*";i++;}return tx;});</script></body></html>

以上的输出结果是：

***

*****

基于目前学习内容，有以下猜测：

D3的主要应用是可视化，可视化最后由各种元素组合表现，利用数据与元素绑定，应该就是把需要表现的信息与表现信息的单元进行绑定

0 0