d3.js学习9

d3.js数据可视化实战手册 学习笔记

插值器Interpolation 给定值域,往中间填值并打印出来

字符插值


var data=[];
var sizeScale=d3.scale.linear()
	.domain([0,9])
	.range([
		"italic bold 12px/30px Georgia, serif",
		"italic bold 120px/180px Georgia, serif"
]);
for(var i=0;i<10;i++){
	data.push(i);
}

function render(data,scale,component){
	var selector=d3.select(component).selectAll("div.cell").data(data);
	//enter
	selector.enter().append("div").classed("cell",true).append("span");
	//exit
	selector.exit().remove();
	//update
	selector.style("display","inline-block")
		.select("span")
		.style("font",function(d,i){
			return scale(d);
	})
	.text(function(d,i){
		return i;
	});
}
render(data,sizeScale,"#font")

颜色插值


var data=[];

var colorScale=d3.scale.linear()
	.domain([0,21])
	.range(["white","#4169e1"]);

for(var i=0;i<21;i++){
	data.push(i);
}

function render(data,scale,component){
	var selector=d3.select(component).selectAll("div.cell").data(data);
	//enter
	selector.enter().append("div").classed("cell",true).append("span");
	//exit
	selector.exit().remove();
	//update
	selector.style("display","inline-block")
		.style("background-color",function(d,i){
			return scale(d);
		})
		.select("span")
		.text(function(d,i){
			return i;
	});
}
render(data,colorScale,"#color");

时间: 2024-09-28 22:37:44

d3.js学习9的相关文章

d3.js学习11

单元素动画transition().duration(duration) var body = d3.select("body"), duration = 5000; body.append("div") .classed("box",true) .style("background-color","#e9967a") .transition() .duration(duration) .style(&qu

d3.js学习笔记(1)

很早之前就知道d3,当初看到它的时候,第一反应就是"我去,怎么这么炫酷",但是一直没有学(自己太懒了),最近可能是五月病犯了,不想看书,不想写代码,不想看论文,不想写论文,虽然什么事情都不想做,不过还是找点事情做吧,那就学学d3呗,说不定将来什么时候就用到了呢. 这篇博客主要从源码的角度去学习,所以对于没有接触过d3的朋友,请先看完下面的资料. 学习资料 学习嘛,当然得找到好的资料咯,下面是我昨天看的一些文章,在d3的github上都能够找到,毕竟最好的学习资料就是官网的文档.教程和源

d3.js学习

画svg图像 1.添加svg元素 2.添加g元素,g元素是一个分组的元素,相当于html中的div元素 3.画图像 4.画坐标轴 ----------------------------------------------------------------------------- d3画闲线性曲线例子 html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&

d3.js学习1

官网: http://d3js.org/ 范例: https://github.com/mbostock/d3/wiki/Gallery 引用: //在线引用 <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> //或下载到本地 <head> <meta charset="utf-8"> <title>

d3.js学习笔记

入门好文:http://www.ourd3js.com/wordpress/?p=51 d3.js和d3.min.js内容一样,后者是压缩过的,适合发行版本,前者适合开发人员. 1.选择集(满足css选择符的要求)主要和数据绑定一起使用 d3.select() d3.selectAll() var body = d3.select("body") 2.数据绑定(实质就是在选择集的元素对象里面添加一个变量,并赋值) p.text(function(d,i)){return d+"

d3.js学习3

Enter-update-exit模式 select.data(data),代表selection图形与data数据的交集->Update Mode select.data(data).enter(),代表data数据排除selection图形与data数据的交集->Enter Mode select.exit,移除所有数据,代表selection图形的部分->Exit Mode E-U-E即为d3.js的基础 数组数据绑定 var data=[10,15,24,46,13,6,96,1

D3.js学习记录

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta h

d3.js学习6

加载server数据d3.json(url,callback) 首先准备一些json数据,将上一篇的js数据转化为json格式并存储 var data=[ {expense:10,category:"Retail"}, {expense:15,category:"Gas"}, {expense:30,category:"Retail"}, {expense:50,category:"Dining"}, {expense:80,

精通D3.js学习笔记(2)比例尺和坐标

1.线性比例尺 d3.scale.linear()   创建一个线性比例尺 .domain([0,500]) 定义域 .range([0,1000]) 值域 linear(x)  输入定义域 返回 值域 linear.invert(y) 输入值域,返回定义域 linear.domain([numbers]) 设定或获取定义域 linear.range([values])设定或获取值域 linear.rangeRound([valuses]) 四舍五入,结果是整数 linear.clamp([bo