每周小节-2 d3-zoom,pan,brush阅读心得 & d3.js on angular读书笔记

总结一下这周学习代码的心得：

工程地址是  https://github.com/msand/d3zoompanbrushchart

代码的主要工作大致是这样的：

0.初始化（建图，坐标轴，数据，线段）

1.新载入一组数据时候对图像的调整（坐标轴，数据，曲线）

2.图像随浏览器边框大小变化而变化

3.图1和图2之间的相关性，即对图1缩放时，要调整图2中brush的位置（onZoom函数）；图2中brush改变的时候，要相应调整图1的图像（线段，数据）（onBrush函数）

 

虽然没有上手写一遍，但是阅读下来也是受益匪浅。

有的语句用了很长的连缀，乍一看完全不知道在写什么，但是输出变量以后就能清楚在干什么，再结合书和资料很快就能看懂其意图。

对于代码功能的理解都写在了代码注释里。

第一次用csdn，似乎可以从这里点进代码链接：  https://code.csdn.net/snippets/1634598

 

目前还没有对代码进行过较大的改动来实现别的效果，都是在原图的基础上进行的一些小操作。

 

 

在理解代码中碰到的一些小点和疑惑：

1. CSS margin: x1,x2,x3,x4 (从上外边距开始顺时针顺序，若某个值没有，则与其对面的值相同，若只有一个则为正方形)

 

   2. window 对象。它表示浏览器窗口。

       所有 JavaScript全局对象、函数以及变量均自动成为 window对象的成员。

       全局变量是 window对象的属性。

       全局函数是 window对象的方法。

       甚至 HTML DOM的 document也是window对象的属性之一：

——引自http://www.w3school.com.cn/

 

  3.jQuery

       on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

  语法

$(selector).on(event,childSelector,data,function,map)

  感觉需要学一下jQuery了？

 

 4. Typeof + var得到变量类型  <--这个应该还是很直观的

 

5.关于AMD规范：

 

【这段完全没弄懂，先跳过】

 

总结一下：感觉看了半天纠结在不重要的细节上…………

以后遇到这样的问题记一下，先看主要部分比较好。

 

 

6.关于逻辑运算符

逻辑 NOT运算符返回的一定是Boolean 值，而OR和AND不一定

具体细节：http://www.w3school.com.cn/js/pro_js_operators_boolean.asp

 

7.重新预习了一遍数组的操作

D3.extent(array[,accessor])

e.g.d3.extent(numbers, function(d){return d % 7;});

 

8.关于交互：

8.1关于brush：

D3.svg.brush():点击拖拽选择一个二维区域。

8.2关于svg中transform属性：translate(x,y)移动

8.3 SVG中的clipPath:这个算是选取框的精髓了，无论怎么缩放和移动，只在显示规定方框中的内容。

 

9.嵌套在function内部的function没有调用时是否会执行？

感觉当时纠结这个问题的时候一定是脑子瓦特了……

调用才会执行……function(){}相当于一个变量只给出了定义……

 

10.代码中有些一开始看上去奇怪的变量的和函数，比如updating和update()函数，= =看到后面发现，其实一共有2组数据value和value2，每组数据各自有两条曲线，update和updateDataAndXYAccessor用于从第一组数据更新到第二组数据。

 

11.感觉需要再看下d3的brush（Ch12）

 

 

 

 

 

 

D3 on angular的学习心得：

 

D3.js部分：

 

关于svg作图：

使用chrome浏览器：没有设置width和height的时候图片会被吞掉一部分，似乎默认大小是300px X 150px？

 

关于数组：

1.array.forEach()中thisArg的用法？感觉一般用的多的是callback，function(d,i)？

2.array.map():

The newarray returned from map will always be the same length of our original array.

A commontask in data visualization is to convert data in one format to data in another.

3.sort :

  1.原数组改变 2.没有给排序的函数，会将数字转为字符串排序

4.d3.merge([[1,2], [3, [4,5]]])  // [1, 2, 3, [4, 5]]

 

关于动画和交互：

对应《精通d3.js》的Ch7和Ch8，这部分pdf上讲得比较简略。

Eventsallow our visualizations to be interactive.

 

d3.select('select').on('change',function(){ alert(this.value); });

d3.select('select').on('change',function(){ alert(this.value); });

// the second event listener overrides the first

 

 

关于文件导入导出

if you’ve just been double clicking on HTML files and opening themin your browser, those HTML pages wont be able to make requests for our locallystored data files.

Tocircumvent this restriction, the simplest solution is to run a web server usingpython -m Simple HTTPServer from the command line in the directory from whichyou want to run your server

 

JSON is a subset of JavaScript

JSONobject keys must be in double quotes.

ValidJSON cannot contain function or

Dateobjects.

 

.parse 转换成一个对象

format.parse("April 27, - 2011");//=> a new date object

 

AngularJS:

Angularmakes it easy to create dynamic visualizations by handling updates on the scope

 

Directives:

varmyApp= angular.module('myApp', []);

myApp.directive('helloWorld',function(){

// TODO: finish directive

});

 

 

 

暂时只看到 Directives的 Creating a directive，剩下的只能这周再看了……感觉看得有些晕乎，需要再找些AngularJS相关的东西看。