MockingBird

摘要： 上一节我们已经学习了如何设置填充区域，其实理解了他的实现原理还是非常简单了。这一节中， 我们主要学习多条曲线的绘制，以及给不同的曲线指定不同的纵坐标。新的数据由于我们要画两条曲线，所以我们要在原来的基础上新增一组测试数据，现在我们的数据是这样的：date close open1-May-12 58.13 3.4130-Apr-12 53.98 4.5527-Apr-12 67.00 6.7826-Apr-12 89.70 7.8525-Apr-12 99.00 8.9224-Apr-12 130.28 9.92... 阅读全文

摘要： JavaScript中的数据类型作为javascript的核心，我们经常要用到，也是最基础的。 javascript中有非常复杂的数据类型：包括对象(Object)数据类型，还有五个基本数据类型（Number, String, Boolean, Undefined, Null）。注意，这些基础的数据类型都是“不可改变的”（下文中将要解释），而对象是“可改变的”。什么是对象（Object）？一个对象是由一个或者多个基本数据类型或者引用数据类型组成的一个集合。组成集合的每一项由“属性/方法：值”的方式来设定这个对象的属性和方法,每一个属性/方法必须是独一无二的字符串或者数字。举一个简单的例子：va 阅读全文

摘要： 上一节我们已经学习了线条样式和格栅的绘制，在这一节中我们将要根据之前绘制的线条对图表进行填充，首先来看一下我们的目标吧在这个图表中，我们对位于线条下面的空间进行了填充，那么，如何改做到呢？设置填充样式这里设置我们填充区域的样式，我们使用浅蓝色进行填充：.area{ fill: lightsteelblue; stroke-width: 0; }定义填充区域就像前面绘制线条之前一样，我们首先要对其进行定义//定义填充区域 var area = d3.svg.area() .x(function(d){ return x(d.date); }) ... 阅读全文

摘要： 上一节中，我们已经画出了图表，并且给图表添加了坐标轴的标签和标题，在这一节中，我们将要学习几个绘制线条不同特性的几个函数，以及给图表添加格栅。ok,进入话题！如何给线条设置绘制的样式？这个其实非常简单，在我们之前定义的valueline基础上加一个.interpolate(“样式”)就行啦//定义线条var valueline = d3.svg.line() .interpolate("basis") .x(function(d){return x(d.date);}) .y(function(d){return y(d.close);});line().interpola 阅读全文

摘要： 上一节中我们已经画出了一个基本的图表，不过忘了给坐标轴添加标签了，所以在本节中我们要给坐标轴加上标签，目标效果如下给X轴添加标签很明显，标签是不是一个text内容块啊，所以我们只要在svg中添加一个text然后再给这个text定位和指定内容不就行了么？先来看如何给x轴添加标签//增加一个x轴的标签svg.append("text") .attr("transform", "translate(" + (width/2) + "," + (height + margin.bottom) + ")" 阅读全文

摘要： 从今天开始我将和大家一起学习D3.js（Data-Driven Documents），由于国内关于D3的学习资料少之又少，所以我觉得很有必要把自己学习过程记录下来，供同学们参考，如果文章有有哪些表达有错误的还希望同学们帮我指出来。当然了， 可以的话我希望大家都可以去看看英文资料（文章后面将列英文资源），毕竟那才是原汁原味的D3。 好了， 废话到此，下面我们开始我们的学习之旅吧！什么是D3.js?一句话：D3.js是一个操纵数据的javascript库！从一个简单的例子开始学习一个新的东西其实很简单，我们先来一个效果图，然后我们再一条条改它的语句，对比呈现的效果来学习这条属性的作用，好了，下面就 阅读全文

摘要： 今天看到豆瓣面试官的一篇文章，讲到关于CSS中的一个知识点：Block formatting context ，感觉这个确实挺有用，同时我也挺赞同作者的一些观点的，这里就不展开谈我的感受了， 此文只聊聊技术。1.什么是Block formatting context？ Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局，就是说处在于不同Block Formatting Context环境中的元素是互不侵犯的。2.Block formatting context的触发条件？the root e. 阅读全文

摘要： 我想javascript中的原型链一直想很多初学javascript的同学感到非常的困惑，今天看了一些文章，结合自己的理解，把原型链这个东西从新来整理一下，如有不对之处，望大家帮忙指出。 首先，我们应该认识的一个问题是，js中的继承是指对__proto__的继承，而不是prototype，这里有同学要问了：“那他们两个有么子区别呢？”， 请看官方的定义： 1. A function's .prototype is actually the prototype of things made by it, not its prototype. 2. __proto__ is the ac. 阅读全文

摘要： canvas是HTML5中新增的标签，下面是各浏览器的支持程度：canvas的默认大小为：宽-300px，高-150px（注意：画布的大小作为canvas标签的行内样式设置，而且是没有“px”单位的哦， 如果你在canvas的css样式中给它设置大小，它只会当做放大比例来处理！），下面这段代码在支持canvas的浏览器中会显示一块400px400px的白色（默认颜色）画布，在不支持canvas的浏览器中只是显示canvas中的文字而已哦。 Canvas 你的浏览器不支持canvas.. 下面我们在刚刚创建的画布中画一个带有边框的矩形：v... 阅读全文

摘要： 下面这个一个运动框架可以控制元素在一个属性上的运动，同时，可以调用回调函数。/*获取元素某个属性的值@obj: 对象@attr: 属性值*/function getStyle(obj, attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; } else{ return getComputedStyle(obj, false)[attr]; }}/*获取元素某个属性的值@obj: 对象@attr: 属性值@iTarget: 目标值(int)@fn: 回调函数*/function ... 阅读全文