发表于   |  
  • 大约一年前介绍过一篇consoleAPI的文章这里
  • 今天看到相关占位符的API，也记录下，供以后参考，内容直白不转弯，上代码；

  • %c 样式

    1
    console.log('%cblue','color: blue')

  • %d 类型转换成整型，不四舍五入

    1
    console.log('%dblue','3') // NaNblue
    1
    console.log('%dblue', 3) // 3blue

  • %f 类型转成浮点型

    1
    console.log('%fblue','3.12') // NaNblue
    1
    console.log('%fblue', 3.33) // 3.33blue

  • %o 类型转成对象

    1
    console.log('%oblue','3.12') // "3.12"blue
    1
    console.log('%oblue', [3.33]) // Arrayblue

  • %s 类型转成字符串

    1
    console.log('%sblue','3.12') // 3.12blue
    1
    console.log('%sblue', [3.33]) // Array(1)blue

发表于   |  

  • 设置全局变量文件夹

    1
    2
    3
    Error: vue command not found
    export PATH=/user/local/bin:$PATH`
    echo $PATH

  • 设置指定$NODE_PATH

    1
    2
    3
    Error: Cannot find module 'inherits'
    echo $NODE_PATH
    export $NODE_PATH=/user/local/lib/node_modules

发表于   |  
  • 这篇博客我要记录的是如何自定义Promise对象，拥有:then,catch,final,all,some这四个API

发表于   |  
  • 一段时间没有记录博客了，四月份和五月份都很忙，四月份主要忙weex，五月份主要忙wexx+d3.v3.js，这里先稳下如何用d3实现负柱形图，供以后参考。

    基础元素

  • 创建底盘svg

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var width = window.innerWidth;
    var height = width/2;
    var svg = d3.selectAll('body')
    	.append('svg')
    	.attr({
    		width: width,
    		height: height
    	})
    	.style({
    		background: "black"
    	})

  • 声明元数据，比例尺，坐标轴

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    var dataSet = [10,20,30,40,60]
    var xScale = d3.scale.ordinal()
    	.domain(dataSet)
    	.rangeRoundBands([0,width-margin.right-margin.left])
    var yScale = d3.scale.ordinal()
    	.domain(dataSet)
    	.rangeRoundBands([height-margin.bottom-margin.top,0])
    var xAxis = d3.svg.axis()
    	.scale(xScale)
    	.orient('bottom')
    var yAxis = d3.svg.axis()
    	.scale(yScale)
    	.orient('left')

  • 生成坐标轴

    1
    2
    3
    4
    svg.append('g')
    	.call(xAxis)
    svg.append('g')
    	.call(yAxis)

  • 因为没有设置合理的位置，Y轴在可见区域之外了，X轴在最顶上了，这都是不是我们期望的，下面做一些改动。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    // 这里额外定义了偏值
    var margin = {
    	'top':20,
    	'right': 50,
    	'bottom': 50,
    	'left': 50
    };
    var width = window.innerWidth;
    var height = width/2;
    var svg = d3.selectAll('body')
       .append('svg')
       .attr({
           width: width,
           height: height
       })
       .style({
           background: "#FFF"
       })
    var dataSet = [1,2,3,4,5]
    var xScale = d3.scale.ordinal()
    	.domain(dataSet)
    	.rangeRoundBands([0,width-margin.right-margin.left])
    var yScale = d3.scale.ordinal()
    	.domain(dataSet)
    	.rangeRoundBands([height-margin.bottom-margin.top,0])
    var xAxis = d3.svg.axis()
    	.scale(xScale)
    	.orient('bottom')
    	.tickSize(-100,0)
    var yAxis = d3.svg.axis()
    	.scale(yScale)
    	.orient('left')
    	.tickSize(-100,-(width-margin.right-margin.left))

    svg.append('g')
    	.attr('transform', 'translate('+(margin.left)+','+(height-margin.bottom)+')')
    	.call(xAxis)
    svg.append('g')
    	.attr('transform', 'translate('+margin.left+','+margin.top+')')
    	.call(yAxis)

  • 以上，我们最简单的打底内容就搞定了，下面尝试添加柱形元素。

    正向柱形

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    svg.selectAll('rect').data(dataSet).enter()
    	.append('rect')
    	.attr({
    		'class': 'rect',
    		'x': function(d, i){
    			return xScale(d)+margin.left
    		},
    		'y': function(d, i){
    			return yScale(d) + margin.top
    		},
    		'width': function(d, i){
    			return  xScale.rangeBand()
    		},
    		'height': function(d, i){
    			return height - margin.top - margin.bottom - yScale(d)
    		},
    		'fill': function(d){
    			return 'red'
    		}
    	})

  • 这样我们就能渲染正常的柱形图

    负向柱形

  • 负向的要点主要有两点
    • 负刻度以0为基准线
    • 负刻度的高度也要以0对应的值为基准值，最后求绝对值

  • 代码稍做改动就能达到如期效果

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    var dataSet = [1,2,-3,4,5]
    var xScale = d3.scale.ordinal()
    	.domain(dataSet)
    	.rangeRoundBands([0,width-margin.right-margin.left])
    var yScale = d3.scale.linear()
    	.domain([d3.min(dataSet,d3.max(dataSet)])
    	.range([height-margin.bottom-margin.top,0])
    svg.selectAll('rect').data(dataSet).enter()
    	.append('rect')
    	.attr({
    		'class': 'rect',
    		'x': function(d, i){
    			return xScale(d)+margin.left
    		},
    		'y': function(d, i){
    			// 要点一，注意这里
    			var basePoint = d > -1 ? yScale(d) : yScale(0)
    			return basePoint + margin.top
    		},
    		'width': function(d, i){
    			return  xScale.rangeBand()
    		},
    		'height': function(d, i){
    			// 要点二，注意这里
    			var baseHeight = yScale(0) - yScale(d)
    			return d > -1 ? baseHeight : Math.abs(baseHeight)
    		},
    		'fill': function(d){
    			return 'red'
    		}
    	})

  • 暂时写到这里，后续补充：分组柱形图

发表于   |  

简介

是用一系列点来控制曲线状态

  • 数据点，控制曲线的起始位置和结束位置
  • 控制点，确定曲线的弯曲程度

    一阶曲线

    没有控制点，仅有两个数据点，最终效果一个线段

    二阶曲线

    两个数据点A和C，一个控制点B来描述曲线状态
  • 链接AB，BC
  • 在AB上取点D，BC上取点E，使AD/AB = BE/BC
  • 链接DE，取点F，使AD/AB = BE/BC = DF/DE

    三阶曲线

    两个数据点A和D，两个控制点来描述曲线状态

发表于   |  

本文主要阐述作者对Canvas中save和restore两个属性的理解。

save

  • 根据文档说明是把绘制状态保存到栈中，相关状态如下：
    • strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit
    • lineDashOffset, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation
    • font, textAlign, textBaseline, direction, imageSmoothingEnabled.

restore

  • 根据文档说明是恢复到最近的保存状态，如果没有保存状态，此方法不做任何改变

实例

阅读全文 »

发表于   |  

事件类型

DOM3 级事件中定义了9个鼠标事件，分别是：

  • click
  • dbclick
  • mousedown
  • mouseenter
  • mouseleave
  • mousemove
  • mouseout
  • mouseover
  • mouseup

区别

  • mouseenter和mouseleave不冒泡，意味着鼠标移到目标元素的后代上不会触发事件响应

click过程

发表于   |  
  • 这篇文章其实不是为解决跨域请求而写的，主要是为了处理相同顶级域名下，不同子域间如何沟通，以及iframe自适应自身内容高度的问题。
  • 主要思路是借用document.domain来统一域名，达到浏览器的同源策略要求。
  • 本例需求还涉及到对clientHeight、offsetHeight、scrollHeight的理解。
  • 这里不展开介绍contentWindow、contentDocument以及ie兼容(attachEvent)的情况，可以自行查阅资料。
    阅读全文 »

发表于   |  
  • 简述下innerText, textContent以及innerHTML的关系
  • 共性很明了，三者都可以读写操作，获取/改变对应DOM节点的内容
  • 差异体现以下几点：
    • 是否触发浏览器重绘
    • 是否安全
    • 是否对特殊元素屏蔽
    • 在页面生命周期里是否起破坏作用
  • 大致可以从下表看出三者特性[来源]：
innerHTML innerText textContent
触发重绘 √ √ ×
包含script,style标签 √ √(IE7↑) √
hidden元素 √ √ √
永久影响 √ √ √
避免XSS × √ √
  • 总结
    • innerText是IE引入的方法，所以会有兼容性问题，在IE9及以上版本同步了textContent的表现