D3 数据可视化实战 笔记

学习真是件奇妙的事情。这本书我之前都看过，有些的知识点却完全没有印象。

总结：把用到的知识好好研究；平时可以了解其他技术的基础，把相关的资料和难点记录下来。

javascript陷阱

1、变量类型
var myName = ‘sfp‘;
typeOf myName;          //‘String‘
2、变量提升
for(var i=0; i<100; i++){
   //...
}
//i在for循环开始之前就有了定义
3、全局命名空间
比较好的做法：只在函数里面声明变量；只声明一个全局对象。
var local_name = {}   //声明空得全局变量，这样的话，只会给window增加一个变量。

SVG

<svg width=‘50‘ height=‘50‘>
      <circle cx=‘25‘ cy=‘25‘ r=‘22‘ fill=‘blue‘ stroke=‘olive‘ stroke-width=‘1‘ />
</svg>　

需要给svg指定width，height；元素的属性值都不带单位

//基础元素，path用于绘制复杂的图形<svg width=‘500‘ height=‘500‘>
      <circle cx=‘25‘ cy=‘25‘ r=‘22‘ fill=‘blue‘ stroke=‘olive‘ stroke-width=‘1‘></circle>
      <rect x=‘50‘ y=‘50‘ width=‘100‘ height=‘100‘/>
      <ellipse cx=‘275‘ cy=‘75‘ rx=‘100‘ ry=‘25‘/>
      <line x1=‘0‘ y1=‘200‘ x2=‘500‘ y2=‘200‘ stroke=‘red‘/>　　　 //y为基线，注意文字不要被切掉
      <text x=‘0‘ y=‘220‘ font-size=‘25‘>sfp</text>
</svg>

为SVG元素添加样式：opacity

比较好的做法:可以区分svg和css的样式

svg .pumpkin{
  /*...*/
}

绘制顺序：数轴和数值标签，最后加到svg中

为fill，stroke指定颜色的时候使用rgba()，可以设置透明度

D3

HTML文件中加上<meta charset=‘utf-8‘>

s