《D3--数据可视化实战》读书总结

d3理解

标签（空格分隔）： 未分类

1.绑定数据

[x] 定义：通过循环的方式将数据绑定在dom元素上，每个数据对应一个元素，所以这个数据的值就能来设定dom元素的width，height，x，y坐标等，这就表现了数据驱动的思想，同时也是d3的精华所在。

[x] 我们绑定的数据通过匿名函数function（d，i）来调用,数据的值就能设置dom元素的属性。

所有的标签都可以进行绑定，对rect，circle，text，我们想要数据来驱动任何元素，那么就用数据绑定该元素，通过attr（）设置x,y,width,height,fill，等属性，on()来绑定鼠标事件。

svg.selectAll("rect")
.data(dataset)  data方法后的语句都会循环,循环次数为数据个数
.enter()
.append("rect")
.attr("x",function(d,i){
return xscale(i);
})
.attr("y",function(d){
return (h-yscale(d));
})
.attr("height",function(d){
return yscale(d);
})
.attr("width",xscale.rangeBand())
.attr("fill",function(d){
return "rgb(0, 0, " + Math.round(d * 10) + ")";
})
.on("click",function(d){  通过on来事件绑定，记住事件绑定种类就可以了
console.log(d);
})
.on("mouseover",function(){
d3.select(this)
.attr("fill","orange")
})
.on("mouseout",function(d){
d3.select(this)
.transition()
.duration(250)
.attr("fill",
4000
"rgb(0,0,"+d*10+")")
})
.on("click",function(){
sortBar();
})

2.数轴

[x] 数轴也是d3中的一个对象，先定义一个数轴，然后将这个数轴放到svg中，一般是放在透明g元素中。数轴在定义的时候要讲比例尺映射上去，这样当比例尺改变的时候，我们只要call（）一次就好了，在svg对象上，通过call（）方法来调用数轴

[x] 在事件监听器后，重新更新数轴，要放到最后

/*坐标轴声生成*/
var xaxis=d3.svg.axis()
.scale(xscale)
.orient("buttom")
.ticks(10)
// .tickFormat(formator);
var yaxis=d3.svg.axis()
.scale(yscale)
.orient("left")
.ticks(10);
/*g是group的意思，跟html中div作用一样*/
svg.append("g")
.attr("class","x axis")
.attr("transform", "translate(0," + (h - padding) + ")")
.call(xaxis);
svg.append("g")
.attr("class","y axis")
.attr("transform","translate("+(padding)+",0)")
.call(yaxis);

[x] 给坐标轴添加css属性

坐标轴本身是由path，line，text元素组成的，所以我们可以添加类的方式来设定css属性样式，当然属性名也只能用svg中的属性名。

<style type="text/css">
.axis path,
.axis line{
fill: none;
stroke: blue;
stroke-width:2;
shape-rendering: crispEdges;
}
.axis text{
font-size: 11px;
fill: grey;

}
</style>

[x] 刻度数值格式化

var formatAsPersontage=d3.format(".1%")
xaxis.ticketFormat(formatAsPersontage)

3. attr() 与style()

attr（）设置svg标签元素的属性
如fill stroke stroke-width等  与通常 的js中css属性并不一样

style（）方法来设置css属性。 相当于在css类上添加一行

.classed("bar",true)   d3中快速的添加删除类
.classed("bar",false)

两者的区别在于

<div class="rec" style="color:"red";"> </div>

很明显，属性与style是一个级别的，style是作用在二级变量上的。

d3中经常在svg操作，有些属性只能是svg的，与html有些不一样。

4.为什么要在svg上绘图？

svg是可缩放矢量图语言，所以在svg上绘制的几何图形我们可以任意缩放，而不会导致像素模糊，当然也可以body上直接绘制空div，填充的方式，间接表现条形图，不过在通常来讲对前端人员来讲是不可能干的，所以我们一般在svg这个画布上绘制，先append一个div设置width，height，然后再添加rect，circle，svg上的几何图形有，rect，circle，还支持路径自由绘制，何乐而不为呢？

5什么是多值映射？

在绑定数据的过程中，大量的数据会有大量的循环，attr()会写好多次，所以多值映射的目的就是整理代码，可以将attr中的，写到一个attr（）中。这就是多值映射，名字高大上，其实不就是简写嘛！！！

6如何实现动态缩放？

我们的数据量随时有可能改变，那么当数据量改变的时候难道要重新设置每个bar的width及x，y坐标吗？显然是不可能的

解决方法就是

.attr("x“,function(d,i){
return i*(w/dataset.length);
})
.attr("width",function(){
return w/dataset.length-padding;

})

出发点就是将svg画布的宽度与i关联起来

7如何将图形元素标记数值？

其实很简单，既然数据能绑定在rect，circle上，那么数据也能绑定在text元素上了，再向svg中append（）text元素就行，并设定text元素坐标，然后用text（）方法打印出来。

svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d){
return d;
})
.attr("x",function(d,i){
return xscale(i);
})
.attr("y",function(d){
return (h-yscale(d)+12);
})
.attr("font-size","10px")
.attr("fill","white")
.style("pointer-events","none")

8比例尺

其实比例尺就是从一个定义域映射到另一个值域而已，这个值域就是我们自己所设定的范围.因为是范围，所以参数是[]中括号形式。

//ordinal是一个序数比例尺，会根据数据集数量来平均分段，且保存了每段的宽度，
var xscale=d3.scale.ordinal()
.domain(d3.range(dataset.length))
.rangeRoundBands([0,w],0.1);
//eg.   .nice()
/*将y值映射到0-100*/
//当数据类型不是点集的形式，max（）下不用嵌套匿名函数
var yscale=d3.scale.linear()
.domain([0,d3.max(dataset,function(d){
return d;
})])
.range([5,h]);

在linear比例尺中，有几个简便方法。

.nice()  将值域取整
.rangeRound() 取整
.clamp()  将值域压缩，当定义域超出范围

用法，直接链接在比例尺后边，如上边标注eg

其他比例尺，

sqrt  平方根
pow   幂函数
log   对数
quantize   对数据分类情况
ordinal    序数比例尺  意思就是离散的值
d3.scale.category10()    预设好的输出10到20中颜色比例尺
d3.time.scale()    日期比例尺

[ ] 序数比例尺的好处

//在我们映射到值域的时候
//既可以用range,也可rangBands，会自动分档，还可rangeRoundBands（）分档加取整
var xScale = d3.scale.ordinal()
.domain(d3.range(dataset.length))
.rangeRoundBands([0, w], 0.05);

这样在bar中求宽度时，可以直接调用比例尺下求出来的。

.attr("width", xScale.rangeBand())

9事件监听器

d3.select("button")
.on("click",function(){

})

10过渡函数transition()

svg.selectAll("circle")
.data(dataset)
.transition()     过渡函数
.duration(1000)   持续事件
.ease("linear")   缓动函数
.each("start",function(){
d3.select(this)
// .transition()
// .duration(200)  //在on方法中不能再有新的过度效果，只能执行立即变换的，否则会覆盖掉前边的
.attr("fill","magenta")
.attr("r",3)
})
//同时也可以有延迟函数
.delay(function(d,i){
return i*100;
})

几种缓动效果：cubic-in -out 默认效果

linear

circle

elatic

bounce

11.each() 在过渡开始或者结束设定效果

在该方法中可以在开始或者结束时设定新的效果，但是如果是start不能再使用过渡函数transition（），因为d3的设计中新的过渡会覆盖掉就的过渡，在外层已经有了一层transition,如果在each内部，再设定一个transition那么就会覆盖外部的transition，外部的一切attr所设定的都会失效。d3是有意这样做的，不想jquery我们必须要等到一个动画结束才可以操作，很烦人。所以只能在start内部使用变换，不能过渡。

参数是end那么就可以，为什么？因为这个元素上一层的过渡已经完成了，我们即使在内部再有transition也无所谓。

//只接受两个参数
each("start",function(){})  each("end",function(){})

.each("start",function(){
d3.select(this)
// .transition()
// .duration(20
ca1a
0)  //在on方法中不能再有新的过度效果，只能执行立即变换的，否则会覆盖掉前边的
.attr("fill","magenta")
.attr("r",3)
})

12剪切蒙版 ClipPath

剪切蒙版相当于ps中的蒙版，只有落在蒙版内部的元素才会显示出来，ClipPath与g元素一样也是没有元素，我们在内部定义可见元素作为蒙版的画布大小。

//在html效果
<ClipPath id="chartarea">
<rect x="30" y="30" width="200" height="300"></rect>
</ClipPath>

/*定义蒙版*/
svg.append("clipPath")
.attr("id","chartarea")
.append("rect")
.attr("x",padding)
.attr("y",0)
.attr("width",w-padding)
.attr("height",h-padding);

svg.append("g")   //将所有的circle添加到g元素中，并设置id以后方便引用
.attr("id","circles")
.attr("clip-path","url(#chartarea)")//引用蒙版 注意引用属性名
.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
...

13 bars.enter()与bars.exit()再理解

增加元素情况：当我们通过data方法对空占位进行绑定后，

var bars=svg.selectAll("rect")
.data(dataset,function(d){
return d.key;
})
返回一个更新元素集，在内部保存着加入和退出子元素集的引用

bars.enter()会一一比较数据的个数与dom元素的个数，因为enter对应的是添加情况，所以会发现数据的个数比dom元素的个数多，我们就会拿到加入元素集的引用，然后再.append(“rect”)

//每次enter只会有一个占位符
bars.enter()
.append("rect")
.attr("x",w)//放到最后
.attr("y",function(d){
return h-yscale(d);
})
.attr("width",function(d){
return xscale.rangeBand();
})
.attr("height",function(d){
return yscale(d);
})

bars.transition()   //在重新更新位置
// .delay(function(d,i){//每个加载数据延迟
//  return i/dataset.length*1000;
// })
.duration(500)
// .ease("linear")
.attr("x",function(d,i){
return xscale(i);
})

bars.exit()同样也是会比较，之后我们拿到退出元素集的dom元素的引用

bars.transition()   //没有退出元素的引用
// .delay(function(d,i){//每个加载数据延迟
//  return i/dataset.length*1000;
// })
.duration(500)
// .ease("linear")
.attr("x",function(d,i){
return xscale(i);
})
.attr("y",function(d){
return (h-yscale(d.value));
})
.attr("height",function(d){
return yscale(d.value);
})
.attr("width",xscale.rangeBand())
.attr("fill",function(d){
return "rgb(0, 0, " + Math.round(d.value * 10) + ")";
});
bars.exit()     //退出元素的引用
.transition()
.duration(500)
.attr("x",-xscale.rangeBand())
.remove();

14为什么需要键绑定？

data.shit()删除的是第一个数据，当我们更新dom元素会发现第一个

rect变成了第二个数值，我们明明想把第一个连同dom元素一块删除掉的，这也就是dom元素的顺序并没有和数据的顺序实现一一绑定，这也就是键绑定存在的原因。

怎么操作？

其实很简单，绑定数据的时候将key也绑定上去

//dataset is now an array of objects.
//Each object has a 'key' and a 'value'.
var dataset = [ { key: 0, value: 5 },
{ key: 1, value: 10 },
{ key: 2, value: 13 },
{ key: 3, value: 19 },
{ key: 4, value: 21 },
{ key: 5, value: 25 },
{ key: 6, value: 22 },
{ key: 7, value: 18 }]
var key = function(d) {
return d.key;
};
//Bind data with custom key function
svg.selectAll("rect")
.data(dataset, key)
.enter()
...
//Bind data with custom key function
svg.selectAll("text")
.data(dataset, key)
.enter()
...

15绑定事件监听器

事件监听器种类有：click mouseover mouseout

pointer-events:none   令监听器失效

一般有两种策略

- 直接通过attr（）或者styel（）改变

- 通过类改变，在类中设定好css样式

on("hover",function(d,i){  确定事件
d3.select(this)    选择元素
.attr("fill","orange")   要做哪些改变
.transiton()

})

sort函数会将元素绑定的值进行排序成一个新数组。

sort(function(a,b){return d3.ascending(a,b)})

[ ] 升序与降序问题：在点击后，鼠标移动的地方，过渡会停止，因为我们在hover上设置了一个过渡，这个过渡覆盖掉了升序或降序中的过渡。

16html提示条

策略：body中设置好一个div，不可见，当鼠标hover则改为可见，移走再不可见。classed()方法 添加删除class属性

.on("click",function(d){
console.log(d);
})
.on("mouseover",function(d){
var xposition=parseFloat(d3.select(this).attr("x")+xscale.rangeBand/2);
var yposition=parseFloat(d3.select(this).attr("y")/2+h/2);

d3.select("#tooltip")
.transition()
.duration(500)
.style("left",xposition+"px")
.style("top",yposition+"px")
.select("#value")
.text(d)
d3.select("#tooltip").classed("hidden",false);

})
.on("mouseout",function(){
d3.select("#tooltip").classed("hidden",true);
})
.on("click",function(){
sortBar();
})