2017年07月_沐风的心

10月 09月 08月 07月 04月 03月 02月 01月

原创 D3 笔记七：交互事件、event、this

交互它指的是用户输入了某种指令，程序接受到指令之后必须做出某种响应。用户用于交互的工具一般有三种：鼠标、键盘、触屏。API与常用事件在 D3 中，每一个选择集都有 on() 函数，用于添加事件监听器。on() 的第一个参数是监听的事件，第二个参数是监听到事件后响应的内容，第二个参数是一个函数。鼠标常用的事件有：click：鼠标单击某元素时，相当于 mousedown 和 mouseup

2017-07-30 20:13:39 3286

什么是 Update、Enter、Exit如果数组为 [3, 6, 9, 12, 15]，将此数组绑定到三个 p 元素的选择集上。可以想象，会有两个数据没有元素与之对应，这时候 D3 会建立两个空的元素与数据对应，这一部分就称为 Enter。而有元素与数据对应的部分称为 Update。如果数组为 [3]，则会有两个元素没有数据绑定，那么没有数据绑定的部分被称为 Exit。示意图如下所示：如此，便可以

2017-07-30 18:19:20 793 1

原创 D3 笔记五：过渡、transition、duration、ease、delay

动态的图表，是指图表在某一时间段会发生某种变化，可能是形状、颜色、位置等，而且用户是可以看到变化过程的。而这个变化过程在 D3 里我们称之为过渡（transition）。实现动态的 API D3 提供了 4 个方法用于实现图形的过渡，即从状态 A 变为状态 B。transition()该 API 的功能为启动过渡效果。其前后是图形变化前后的状态（形状、位置、颜色等等），例如：.attr("fil

2017-07-30 17:12:41 6632

原创 D3 笔记四：分组元素、坐标轴、SVG基本图形

六种基本图形在 SVG 画布的预定义元素里，有六种基本图形：矩形圆形椭圆线段折线多边形另外，还有一种比较特殊，也是功能最强的元素：路径画布中的所有图形，都是由以上七种元素组成。分组元素分组元素 <g>，是 SVG 画布中的元素，意思是 group，顾名思义此元素是将其他元素进行组合的容器。定义坐标轴直接先来看示例代码：var dataset = [ 2.5 , 2.1 ,

2017-07-29 23:18:25 2236

原创 D3 笔记三：线性比例尺、序数比例尺、domain()、range()

如果用原生数值代替像素值，显示的图形过小或过大时，就需要将某一区域的值映射到另一区域，但其大小关系不变，这就是比例尺（Scale）了。定义域与值域在数学中，x 的范围被称为定义域，y 的范围被称为值域。D3 中的比例尺，也有定义域和值域，分别被称为 domain 和 range。开发者只需要指定 domain() 和 range() 的范围，如此即可得到一个计算关系。两种比例尺线性比例尺：v

2017-07-29 23:15:40 7672

原创 D3 笔记二：SVG、Canvas、画布、矩形、填充图形

画布是什么前几章的处理对象都是 HTML 的文字，没有涉及图形的制作。要绘图，首要需要的是一块绘图的“画布”。HTML 5 提供两种强有力的“画布”：SVG 和 Canvas。SVG 是什么 SVG 指可缩放矢量图形（Scalable Vector Graphics），是用于描述二维矢量图形的一种图形格式，是由万维网联盟制定的开放标准。 SVG 使用 XML 格式来定义图形。除了 IE8 之前的

2017-07-28 20:09:25 4539

原创 D3 笔记一：选择元素、DOM 操作、绑定数据

引入 D3 文件：<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>选择集与链式语法使用 d3.select() 或 d3.selectAll() 选择元素后返回的对象，就是选择集。有人会发现，D3 能够连续不断地调用函数，形如：d3.select().selectAll().text()这称为链式语法，和

2017-07-28 20:06:43 2936

原创同源策略与跨域

在浏览器中，有一个很重要的安全性限制，被称为 “Same-Origin Policy”（同源策略）。通过 XHR 实现 Ajax 通信的一个主要限制，就来自与同源策略。即默认情况下，XHR 对象只能访问与包含它的页面位于同一个域中的资源。然而，当进行一些比较深入的前端编程的时候，不可避免地需要进行跨域操作。这时候“同源策略”就显得过于苛刻，于是，就需要进行跨域访问数据了！一、同源策略？同源策略（Sa

2017-07-26 13:16:17 524

原创 15 分钟全方位了解 JS 的继承

许多 OO 语言都支持两种继承方式：接口继承和实现继承。接口继承只继承方法签名，而实现继承则继承实际的方法。由于 ECMAScript 中的函数没有签名，所以在 JS 中无法实现接口继承。ECMAScript 只支持实现继承，而且其实现继承主要是依靠原型链来实现的。所以，下面所要说的原型链继承、借用构造函数继承、组合继承、原型式继承、寄生式继承和寄生组合式继承都属于实现继承。最后的最后，我会解释 E

2017-07-20 20:42:18 371

原创运用 JS 中的各种模式创建自定义类型

虽然在 ES6 中，已经出了 class 的语法糖，貌似好像不用了解 ES5 中的这些老东西了，但是越深入学习，你会发现理解这些模式的重要性。在本文中，我会描述 7 种常用的创建自定义类型的模式：工厂模式、构造函数模式、原型模式、组合使用构造函数模式、动态原型模式、寄生构造函数模式、稳妥构造函数模式。分别给出他们的示例代码，并分析他们的利弊，方便读者选择具体的方式来构建自己的自定义类型。1. 工厂模

2017-07-17 20:44:27 1263

原创 hasOwnProperty() 、in 操作符与 for-in 循环

1. hasOwnProperty()使用 hasOwnProperty() 方法可以检测一个属性是存在于对象实例中，还是存在于其原型中。这个方法（不要忘了它是从 Object 继承来的）只在给定属性存在于对象实例中时，才会返回 true 。请看下面的示例代码：function Person(){}Person.prototype.name = "Nicholas";Person.prototy

2017-07-17 16:25:43 1238

原创 CSS相关面试题汇总笔记

<map></map>表示热区。<area/>这是点击链接区域。shape="circle"，说明点击区域是个圆形；coords="圆心点X值,圆心点Y值,圆的半径"，说明圆的位置及大小。shape="rect"，说明点击区域是个矩形；coords="左上角X值,右上角Y值,左下角X值,右下角Y值"，说明矩形的位置及大小。shape="poly"，说明点击区域是个多边形；coords="第一个点

2017-07-10 18:57:18 505

JS入门教程

这是一篇简单的JavaScript入门笔记，他会告诉你JS有哪些组成，比如：JS基本方法、变量、事件、函数，以及如何测试JS代码和JS中的命名方式。此文，最好在有HTML和CSS的基础上进行阅读。

2016-03-26

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

JimmyLuo17的博客