每周小节-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
目前还没有对代码进行过较大的改动来实现别的效果，都是在原图的基础上进行的一些小操作。
在理解代码中碰到的一些小点和疑惑：
- 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相关的东西看。
每周小节-2 d3-zoom,pan,brush阅读心得 d3.js on angular读书笔记相关推荐
- 《如何有效阅读》藤原和博 读书笔记
感想 1.整本书内容零散: 主旨是如何有效阅读,但是阅读方法不成系统,更像是零散的想法,或者说是作者想到什么就写什么.第一遍读完以后,大脑里没有什么整体思路,觉得作者说的有道理,但是没有实质性的方法建 ...
- 《英语阅读教学与思维发展》读书笔记(二)
第二章 阅读对提高学习能力的作用 一.英语学习者考试成绩分析 2009年,上海学生首次参加PISA (国际学生评价项目)考试,取得 全球第一的佳绩,令世人瞩目.2011 年,PISA项目创始人及总负责 ...
- 《英语阅读教学与思维发展》读书笔记(一)
第一章第一节 阅读教学现状与成因 一.教学现状 把外语作为基础教育阶段一门必修课程, 不仅有利于国家外事语言交流的能力,而且有助于开发学生的潜力,使学生形成良好的学习习惯,促进学生的全面发展.英语被确 ...
- 《英语阅读教学与思维发展》读书笔记(四)
第四章 阅读对发展思维能力的功效 一.外语教育学思结合是否可行 在学思结合概念中,"学思"是并列名词,但具有动词特征:"学"指学习英语知识和技能,"思 ...
- 《英语阅读教学与思维发展》读书笔记(五)
第五章 文学阅读课程化 一.理解文学阅读课程 阅读是人的认知活动,构建文学阅读课程,需要理解和解释.理解是一切活动的基础,理解和解释是人类普遍具有的独特的认知方式.课程可以理解为列入教学计划的学 ...
- 用html做一个豆瓣网阅读页面,使用JS制作豆瓣读书报告的长图片
2018年的豆瓣读书报告采用了微信小程序,不能再像以前那样方便的截取长图片.只好另想办法,最后利用网上搜到的代码结合截图软件达到了目的. 1.新建一个html文件,输入下面的代码: 测试页面 //下面 ...
- 解决D3.zoom()缩放和平移初始化时图形位置会跳跃的问题(v6版本)
先奉上有问题的代码 //在页面中添加svg 支持拖拽和缩放var svg = d3.select("#body").append("svg").attr(&qu ...
- 【阅读心得】Python编程无师自通——专业程序员的养成
读书笔记: 笔者是一个稍微有点编程基础的人,学习python一开始是从吴恩达的视频入门的,但是直接套用框架,使用模块,对python的语法却不甚了解,我也试过直接去廖雪峰的python学习网站上面学习 ...
- 《如何阅读一本书》-读书笔记-reading_note
<如何阅读一本书>-读书笔记-reading_note 文章目录 <如何阅读一本书>-读书笔记-reading_note 1 书籍信息 2 书评 3 读书笔记 4 精彩书评 1 ...
最新文章
- css 中 border 断线解决，简单实用
- Netty实战 IM即时通讯系统（十二）构建客户端与服务端pipeline
- 云时代架构读后感（十六）
- window 常用软件
- 预训练模型：一种低资源实体NER标注的方法
- 项目成败的关键要素：有效沟通
- 数据分析师面临的11个挑战及其解决方法
- webpack 5.5.1 compiled with 1 error in 63 ms
- Mydrivers: 64国IT竞争力排名 中国仅第49
- opencv(二）图像像素提取及操作
- 遗传算法(Genetic Algorithm)解析
- DrEA-many objective总结
- HDOJ 1859 最小长方形
- 判断体型c语言程序,C语言程序设计经典体型.doc
- C# TCP/UDP网络通讯调试助手（含源码）
- Karas中LSTM模型的各个参数的含义
- 项目三：声乐盒(音节+音乐)实验
- 神策 2019 数据驱动大会，引领大数据行业“矩•变”升级
- 2023 源支付码支付系统源码v3.0 二开修复版 全本地化
- Activiti 工作流引擎 ～ 获取审批记录