D3 数据可视化实战 笔记
学习真是件奇妙的事情。这本书我之前都看过，有些的知识点却完全没有印象。
总结：把用到的知识好好研究；平时可以了解其他技术的基础，把相关的资料和难点记录下来。
javascript陷阱
1、变量类型
var myName = 'sfp';
typeOf myName; //'String'
2、变量提升
for(var i=0; i<100; i++){
//...
}
//i在for循环开始之前就有了定义
3、全局命名空间
比较好的做法：只在函数里面声明变量；只声明一个全局对象。
var local_name = {} //声明空得全局变量，这样的话，只会给window增加一个变量。
SVG
<svg width='50' height='50'>
<circle cx='25' cy='25' r='22' fill='blue' stroke='olive' stroke-width='1' />
</svg>
需要给svg指定width，height；元素的属性值都不带单位
//基础元素，path用于绘制复杂的图形
<svg width='500' height='500'> <circle cx='25' cy='25' r='22' fill='blue' stroke='olive' stroke-width='1'></circle> <rect x='50' y='50' width='100' height='100'/> <ellipse cx='275' cy='75' rx='100' ry='25'/> <line x1='0' y1='200' x2='500' y2='200' stroke='red'/>
//y为基线，注意文字不要被切掉 <text x='0' y='220' font-size='25'>sfp</text> </svg>
为SVG元素添加样式：opacity
比较好的做法:可以区分svg和css的样式
svg .pumpkin{
/*...*/
}
绘制顺序：数轴和数值标签，最后加到svg中
为fill，stroke指定颜色的时候使用rgba()，可以设置透明度
D3
HTML文件中加上<meta charset='utf-8'>
d3.select(''body).append('p'): 创建一个<p>，加到<body>末尾
加载数据的最佳实践：csv, tsv, json
var dataset;
d3.json('data.json', function(error, data){
if(error){
console.log(error);
}else{
dataset = data;
console.log(data);
otherfunction();
}
});
//在callback也能使用返回的数据
//加载文件遇到问题时，会有提示
绑定数据
var dataset = [5, 10, 15, 20, 25];
d3.select('body')
.selectAll('p')
//此后所有的方法都将执行5遍
.data(dataset)
.enter()
.append('p')
.text(function(d){
return d;
});
attr()设置dom属性的值；style()直接给元素添加css样式
添加类.classed('bar', true);
删除类.classed('bar', false);
//.attr('class', 'bar')只能添加，不能删除，所以还是不用这种方法了。
HTML属性width,<img>中就有，<div>中就没有，所以设置属性使用attr还是style的具体看看
在DOM中创建一个元素，都用一个变量表示，方便以后使用。
var dataset = [5, 10, 15, 20, 25];
var w = 500;
var h = 50;
var svg = d3.select('body').append('svg');
svg.attr('width', w)
.attr('height', h)
;
var circles = svg.selectAll('circle')
.data(dataset)
.enter()
.append('circle')
;
circles.attr('cx', function(d, i){
return i*50+25;
})
.attr('cy', function(d, i){
return h/2;
})
.attr('r', function(d, i){
return d;
})
一个svg元素只使用一个attr()和style(), 使用多值映射的方式
比例尺：把输入域 映射为 输出范围
dataset = [5, 10, 15, 20, 25];
var scale = d3.scale.linear();
scale.domain([100, 500]);
scale.range([10, 350]);
//动态范围
d3.max(dataset); //25
var dataset_1 = [
[5, 20],
[480, 90]
];
//二维数组
d3.max(dataset_1, function(d){
return d[0];
})
//480
//.nice():把两端的值扩展到最接近的整数
//.rangeRound():输出的值舍入
//.clamp():超出范围的值，取整到最值
数轴：生成轴线，标签，刻度
dataset = [5, 10, 15, 20, 25];
var format = d3.format('.1%'); var svg = d3.select('body').append('svg'); svg.attr({ width: 500, height:100 }) var scale = d3.scale.linear(); scale.domain([100, 500]); scale.range([10, 350]); var axis = d3.svg.axis() .scale(scale) .orient('bottom')
.tickFormat(format) ; svg.append('g') //把<g>交给axis() .classed('axis', true)
//平移 .attr({ transform: "translate(0, 50)" }) .call(axis) ;
svg{
margin-top:100px;
}
.axis path{
fill:none;
stroke:black;
stroke-width:2px;
//保证数轴和刻度线精确到像素级
shape-rendering:crispEdges;
}
.axis line{
fill:none;
stroke:red;
stroke-width:2px;
shape-rendering:crispEdges;
}
.axis text{
color:red;
}
数轴会放在<g>中，有<line><text><path>三部分组成，可以各自设置样式
指定刻度个数：ticks(5)
垂直数轴：orient('left')
动画
使用序数比例尺生成条形图：更加简洁
var w = 600;
var h = 250;
var dataset = [5,10,15,20,25];
var svg = d3.select('body').append('svg');
svg.attr({
width: w,
height:h
});
var xScale = d3.scale.ordinal()
//d3.range(2)--[0,1]
.domain(d3.range(dataset.length))
//将值域分为2档，输出值舍入，档间距为每档宽度的5%
.rangeRoundBands([0, w], .05)
;
svg.selectAll('rect')
.data(dataset)
.enter()
.append('rect')
.attr({
//更新,根据i返回x的位置
x: function(d, i){
return xScale(i);
},
y: function(d, i){
return h-d*10;
},
//直接得到width
width: xScale.rangeBand(),
height: function(d, i){
return d*10;
}
})
//过渡动画
.transition()
//延迟时间 .delay()
//持续时间 .duration(1000)
//缓动函数 .ease('linear')
//过渡开始执行的操纵
.each('start', function(){
d3.select(this)
.attr('', '')
;
})
.attr({})
//过渡结束执行的操作
.each('end', function(){
...
}) ;
9.3.7 剪切路径？
忽略鼠标事件：pointer-events：none
排序
d3.selectAll('rect')
.sort(function(a, b){
return d3.ascending(a, b);
})
提示条
.on('mouseover', function(d){
console.log(d3.select(this).attr('x'));
})