2014.12.14 python&pip

今天尝试使用github上的一个音乐极客软件,python、pip的安装和设置环境变量成功了,但是beet的安装似乎出现了问题,运行时报错。

自己的电脑终于归位了,换了个电源适配器和显卡,希望还能用个两年。

投了简历,EMC&新浪,希望能得到一份好的实习。

 

HTML:

abbr元素:缩写

dfn:定义术语

q元素:引用来自他处的内容

bdo:设置文字方向

mark:突出显示文字

 

趁机回忆一下D3的内容吧,这个玩意儿实在是让人觉得很困惑,总是记不住

插入并设置元素:

var new_h1 = body.append("h1");
new_h1.text("Append new h1");

简单的图表:

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>  
<script>	
		var width = 600;
		var height = 600;
		var svg = d3.select("body").append("svg")
					   .attr("width",width)
					   .attr("height",height);
		
		var dataset = [ 30 , 20 , 45 , 12 , 21 ];
		
		svg.selectAll("rect")
		   .data(dataset)
		   .enter()
		   .append("rect")
		   .attr("x",10)
		   .attr("y",function(d,i){
				return i * 30;
		   })
		   .attr("width",function(d,i){
				return d * 10;
		   })
		   .attr("height",28)
		   .attr("fill","red");
		   
</script>

代码的解说为:

第 3 – 4 行: 定义两个变量,代表 SVG 绘制框的宽和高。

第 5 – 7 行: 选择 <body> 后,在 <body> 里插入 <svg> ,用 attr 来给 <svg> 添加属性。用 attr 添加属性的效果类似于在 HTML 中 <a href=”….”></a> 给 a 添加属性 href 。

第 9 行: 要使用的数据。

第 11 行: 表示在 <svg> 中选择所有的 <rect> 元素,但是实际上这时候 <svg> 中还不存在 <rect> 元素。这是 D3 一个比较特殊的地方,即它能够选择一个空集。先不要惊讶,请看第 13 行。

第 12 行: 表示将数据绑定要这个 <svg> 上。

第 13 行: enter() 表示当所需要的元素( <rect> )比绑定的数据集合的元素( dataset  )少时,自动添加位置,使得与数据集合的数量一样多。这里很重要,后面章节会详细说明。

第 14 行: 紧接上一行, 添加元素 <rect> 。11-14行经常一起出现,要注意,如不理解,可暂时不必深究。

第 15 – 27 行: 设定 <rect> 元素的各项属性,如位置,长短,颜色等。

 

 

var wx = d3.scale.linear()
.domain([0,d3.max(dataset)])
.range([0,500]);

d3.scale.linear() 用于生成一个线性函数的比例尺,它的初始定义域 domain 为 [ 0 , 1 ] ,初始值域 range 为 [ 0 , 1 ] , 这里的 [  ] 表示的是范围。 现在我们把 domain 设定为 [ 0 , d3.max(dataset) ] ,即0到 dataset 中的最大值。 range设定为0到500。 这表示如果数据是45,则返回500,如果是30,则返回333.333。

接下来只要在添加 <rect> 时给 width 属性赋值的时候换成变量 wx 即可。

请看http://www.ourd3js.com/wordpress/?p=100

 

posted on 2014-12-14 13:08  阿追#可视化  阅读(216)  评论(1编辑  收藏  举报

导航