D3学习一

<script>
	d3.selectAll("p").style("color","red");
	d3.select("body").style("background-color","white");
	/*hsl(hue, saturation, lightness)Hue 是色盘上的度数（从 0 到 360） - 0 (或 360) 是红色，120 是绿色，240 是蓝色。Saturation 是百分比值；0% 意味着灰色，而 100% 是全彩。Lightness 同样是百分比值；0% 是黑色，100% 是白色。*/
	d3.selectAll("p").style("color",function(){
	 return "hsl("+Math.random()*360+",100%,50%)";
	 });
	
	/*function中参数d是返回的颜色值，i是对应的’p‘的顺序数*/
	d3.selectAll("p").style("color",function(d,i){
	 return i%2 ? "red":"blue";});
	
	/*function中参数d是返回数组值*/
	d3.selectAll("p")
    .data([34, 48, 55, 64, 75, 42])
    .style("font-size", function(d) { return d + "px"; });
	
	/*function中参数d是返回数组值，i是数组索引，。enter()用于添加一个新的节点*/
	d3.select("body").selectAll("p")
    .data([4, 8, 15, 16, 23, 42])
  	.enter().append("p")
    .text(function(d,i) { return "I’m number " + i + ":" + d + ""; });
	
	/*更新数据,将p标签中的数据更新为数组中的值，并且设置属性为String.假设只有4个p,但是有6个data值，如果要显示另外两个data,需要使用enter添加P标签，就会显示另外两个data值，remove()用于移除存在的节点*/
	var p = d3.select("body").selectAll("p")
    .data([4, 8, 15, 16, 25, 45])
    .text(String);

	p.enter().append("p")
    .text(String);

	p.exit().remove();

	d3.select("body").transition()
    .style("background-color", "black");
</script>