D3.js：数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Page Template</title>
<script type="text/javascript" src="d3/d3.js"></script>
</head>
<body>
<script type="text/javascript">
/* D3 API：
d3.select从当前文档中选择一系列元素,然后把对它的引用交给调用链中的下一个方法。
selectAll()取得多个元素.
selection.append - 创建并添加新元素到选定元素后
selection.text - 设置或获取选定元素的标签体文本内容。
*/
d3.select("body")
.append("p")
.text("New apragraph!");
//不使用连缀法·案例
var body = d3.select("body");
var p = body.append("p");
p.text("New paragraph!");
//不使用连缀法·自己试着小幅修改
var body = d3.select("body");
var h1 = body.append("h1");
h1.text("New paragraph~");
//Blind Data
//data
var dataset = [5, 10, 15, 20, 25]
//loading csv data
/* like this
Food,Deliciousness
Apples,9
Green Beans,5
Egg Salad Sandwich,4
Cookies,10
Vegemite,0.2
Burrito,7
*/
d3.csv("food.csv",function(data){
console.log(data);
});
//global variable first
var dataset;//Global variable
da.csv("food.csv", function(data){
dataset = data; //加载完后，复制到datas
generateVis(); //调用其它依赖函数
hideLoadingMsg(); //显示图形的函数
});
// 调用生成可视化图表的
// 其他函数，比如：
generateVisualization();
makeAwesomeCharts();
makeEvenAwesomerCharts();
thankAwardsCommittee();
//校验错误
var dataset;
d3.csv("food.csv" function(error, data){
if (error){
console.log(error);
}else{
console.log(data);
dataset = data;
generateVis();
hideLoadingMsg(),
}
});
//JSON先略过
//动态生成段落
var dataset = [ 5, 10, 15, 20, 25 ];
d3.select("body").selectAll("p")
.data(dataset)
.enter()
.append("p")
.text("New paragraph!");
//在控制台查看数组
console.log(d3.selectAll("p"));
//详细解释
d3.select("body").selectAll("p")
//选择 DOM中的所有段落。因为还没有段落，所以返回空元素。可以认为这个空元素代表马上就会创建的段落。
.data(dataset)//解析并数出数据值。 dataset 数组中有 5 个值，因而此后的所有方法都将执行五遍，每次针对一个值。
.enter()//重点在此,创建新的绑定数据的元素，必须使用 enter() 。这个方法会分析当前选择的DOM 元素和传给它的数据，如果数据值比对应的 DOM 元素多，就创建一个新的占位元素。然后把这个新占位元素的引用交给链中的下一个方法。
.append("p")//取得由 enter() 创建的空占位元素，并把一个 p 元素追加到相应的 DOM 中。然后它再把自己刚创建的元素交给链中的下一个方法。
.text("New paragraph!")//取得新创建的 p 元素，插入文本值。
var dataset = [ 5, 10, 15, 20, 25 ];
d3.select("body").selectAll("p")
.data(dataset)
.enter()
.append("p")
.text("New paragraph!");
//输出数据
.text(function(d) { return d; });
//自定义新函数,niming函数
function(input_value){
return output_value;
}
function(d){ return d;}//终于从这里看到function（d）的出处了。
//命名函数，把函数保存在一个变量中。
var doSomething = function(){},
//再进行一些变动
.text(function(d){ return "I can count up to"+ d })
//为数据添加样式
/*D3 API:
selection.attr - 设置或获取指定属性。
selection.style - 设置或删除 CSS 属性。style优先级高于attr。*/
//设置为red
.style("color","red")
//设置颜色条件
.style("color",function(d){
if (d>15){ return "red";
}else{
return "blue";
}
});
</script>
</body>
</html>