《数据可视化实战:使用D3设计交互式图表 》笔记

时间:2022-07-21 14:35:01

花了半天时间翻了一下这本书,这本书其实讲得并不深,也挺适合刚入门d3的,同时也有一些小tip可以看看。

1.全局变量

输入window可以看全局变量,作者表示定义全局变量有时候会导致冲突,给出了一个解决方案是将所有你定义的全局变量定义为一个一个全局变量的属性,比如说定义一个vis的全局变量。然后再把要定义的变量variable变成 vis.variable 这样的变量.

2.加载数据

加载过数据量比较多的人可能也意识到这个问题了,就是加载数据的同时,其他js代码照样执行。所以最好在回调函数中进行和数据有关的操作。

另外无论数据加载与否,回调函数都会执行。所以可以对error进行判断,

if(error){
    console.log(error)
}else{

//加载数据正常的代码
}


3.添加类和删除类

ele.classed("#bar",true);
ele.classed("#bar",false);

可以通过sttr("class","#bar")的方式,同时也可以通过上面的代码,第一行是添加类,第二行是删除这个类的属性。


4.多值映射

不用每次都attr列成 应该是可以归并到一起来。

attr(" {

x:width;

y:height

}")

5.scale的几个效果(我也不清楚我这几行笔记的意思了,泪)P117

.nice()让数据更加美观

.rangeRound() 代替range 更接近整数值

.clamp() true的话,超出会被取整到最高或者最低

6.ordinal()是序数 ,序数的意思是1,2,3,4,这样取离散数字 P130

.rangebound([0,w],0.05)通过0,05取一次序数

7.d3.max()

d3.max(dataset,function(d){return d.value })

上面这行代码可以取value的最大值,貌似用map也可以。

d3.max(data.map(function(d) { return d.date; }))