D3学习快速入门 2017.7.27

D3学习快速入门夏敏捷1.D3是什么•近年来，可视化越来越流行，许多报刊杂志、门户网站、新闻、媒体都大量使用可视化技术，使得复杂的数据和文字变得十分容易理解，有一句谚语“一张图片价值于一千个字”，的确是名副其实。各种数据可视化工具也如井喷式地发展，D3正是其中的佼佼者。•D3是什么•D3的全称是（Data-DrivenDocuments），顾名思义可以知道是一个被数据驱动的文档。听名字有点抽象，说简单一点，其实就是一个JavaScript的函数库，使用它主要是用来做数据可视化的。如果你不知道什么是JavaScript，请先学习JavaScript的相关知识。•学习D3最好的地方是：，当然里面都是英文的。根据数据添加元素、数据改变修改元素等Html输出HelloWorldhtmlheadmetacharset=utf-8titleHelloWorld/title/headbodypHelloWorld1/ppHelloWorld2/p/body/htmlJavaScripthtmlheadmetacharset=utf-8titleHelloWorld/title/headbodypHelloWorld1/ppHelloWorld2/pscriptvarparagraphs=document.getElementsByTagName(p);for(vari=0;iparagraphs.length;i++){varparagraph=paragraphs.item(i);paragraph.innerHTML=Ilikedog.;}/script/body/html2选择元素和绑定数据1.如何选择元素•在D3中，用于选择元素的函数有两个：•d3.select()：是选择所有指定元素的第一个•d3.selectAll()：是选择指定元素的全部这两个函数返回的结果称为选择集。varbody=d3.select(body);//选择文档中的body元素varp1=body.select(p);//选择body中的第一个p元素varp=body.selectAll(p);//选择body中的所有p元素varsvg=body.select(svg);//选择body中的svg元素varrects=svg.selectAll(rect);//选择svg中所有的svg元素选择集和绑定数据通常是一起使用的。绑定数据•2.如何绑定数据D3有一个很独特的功能：能将数据绑定到DOM上，也就是绑定到文档上。D3中是通过以下两个函数来绑定数据的：•datum()：绑定一个数据到选择集上•data()：绑定一个数组到选择集上，数组的各项值分别与选择集的各元素绑定相对而言，data()比较常用。假设现在有三个段落元素如下。pApple/ppPear/ppBanana/p接下来分别使用datum()和data()，将数据绑定到上面三个段落元素上。•2.1datum()假设有一字符串China，要将此字符串分别与三个段落元素绑定，代码如下：varstr=China;varbody=d3.select(body);varp=body.selectAll(p);p.datum(str);//绑定数据后使用此数据来修改三个段落元素的内容p.text(function(d,i){return第+i+个元素绑定的数据是+d;});第0个元素绑定的数据是China第1个元素绑定的数据是China第2个元素绑定的数据是China在上面的代码中，用到了一个无名函数function(d,i)。当选择集需要使用被绑定的数据时，常需要这么使用。其包含两个参数，其中：d代表数据，也就是与某元素绑定的数据。i代表索引，代表数据的索引号，从0开始。例如，上述例子中：第0个元素apple绑定的数据是China。•2.2data()有一个数组，接下来要分别将数组的各元素绑定到三个段落元素上。vardataset=[Ilikedogs,Ilikecats,Ilikesnakes];绑定之后，其对应关系的要求为：•Apple与Ilikedogs绑定•Pear与Ilikecats绑定•Banana与Ilikesnakes绑定调用data()绑定数据，并替换三个段落元素的字符串为被绑定的字符串：varbody=d3.select(body);varp=body.selectAll(p);p.data(dataset).text(function(d,i){returnd;});IlikedogsIlikecatsIlikesnakes•if(…..){d3.select(this).text()}这样是获取当前元素的文本;•也可以直接用js自带的this.innerHTML或this.innerText;//使用data绑定数组vardataset=[Ilikedogs,Ilikecats,Ilikesnakes];p.data(dataset).text(function(d,i){if(i==2)returnd;elsereturnthis.innerText;});ApplePearIlikesnakes这段代码也用到了一个匿名函数function(d,i)，其对应的情况如下：当i==0时，d为Ilikedogs。当i==1时，d为Ilikecats。当i==2时，d为Ilikesnakes。此时，三个段落元素与数组dataset的三个字符串是一一对应的，因此，在函数function(d,i)直接returnd即可。结果自然是三个段落的文字分别变成了数组的三个字符串。2.1选择、插入、删除元素1.选择元素假设在body中有三个段落元素：•pApple/p•pPear/p•pBanana/p1.1选择第一个p元素使用select，参数传入p即可，如此返回的是第一个p元素。varp1=body.select(p);p1.style(color,red);1.2选择三个p元素使用selectAll选择body中所有的p元素。varp=body.selectAll(p);p.style(color,red);1.选择元素1.3选择第二个p元素有不少方法，一种比较简单的是给第二个元素添加一个id号。•pid=myidPear/p然后，使用select选择元素，注意参数中id名称前要加#号。•varp2=body.select(#myid);•p2.style(color,red);1.选择元素•1.4选择后两个p元素给后两个元素添加class，•pclass=myclassPear/p•pclass=myclassBanana/p由于需要选择多个元素，要用selectAll。注意参数，class名称前要加一个点。varp=body.selectAll(.myclass);p.style(color,red);1.选择元素1.选择元素•关于select和selectAll的参数，其实是符合CSS选择器的条件的，即用“井号（#）”表示id，用“点（.）”表示class。•此外，对于已经绑定了数据的选择集，还有一种选择元素的方法，那就是灵活运用function(d,i)。我们已经知道参数i是代表索引号的，于是便可以用条件判定语句来指定执行的元素。2.插入元素插入元素涉及的函数有两个：•append()：在选择集末尾插入元素•insert()：在选择集前面插入元素假设有三个段落元素，与上文相同。2.1append()•body.append(p)•.text(“hello);在body的末尾添加一个p元素，结果为：ApplePearBananahello2.插入元素2.2insert()在body中id为myid的元素前添加一个段落元素。body.insert(p,#myid).text(“insertpelement”);//“链式语法”已经指定了Pear段落的id为myid，因此结果如下。AppleinsertpelementPearBanana3.删除元素删除一个元素时，对于选择的元素，使用remove即可，例如：varp=body.select(#myid);p.remove();如此即可删除指定id的段落元素。3.做一个简单的图表！柱形图是一种最简单的可视化图标，主要有矩形、文字标签、坐标轴组成。本文为简单起见，只绘制矩形的部分，用以讲解如何使用D3在SVG画布中绘图。3.1SVG是什么1.画布是什么前几章的处理对象都是HTML的文字，没有涉及图形的制作。要绘图，首要需要的是一块绘图的“画布”。HTML5提供两种强有力的“画布”：SVG和Canvas。•SVG，指可缩放矢量图形（ScalableVectorGraphics），是用于描述二维矢量图形的一种图形格式，是由万维网联盟制定的开放标准。SVG使用XML格式来定义图形，除了IE8之前的版本外，绝大部分浏览器都支持SVG，可将SVG文本直接嵌入HTML中显示。SVG有如下特点：•SVG绘制的是矢量图，因此对图像进行放大不会失真。•基于XML，可以为每个元素添加JavaScript事件处理器。•每个图形均视为对象，更改对象的属性，图形也会改变。•不适合游戏应用。3.2Canvas是什么•Canvas是通过JavaScript来绘制2D图形，是HTML5中新增的元素。•Canvas有如下特点：•绘制的是位图，图像放大后会失真。•不支持事件处理器。•能够以.png或.jpg格式保存图像•适合游戏应用2.添加画布D3虽然没有明文规定一定要在SVG中绘图，但是D3提供了众多的SVG图形的生成器，它们都是只支持SVG的。因此，建议使用SVG画布。使用D3在body元素中添加svg的代码如下。varwidth=300;//画布的宽度varheight=300;//画布的高度varsvg=d3.select(body)//选择文档中的body元素.append(svg)//添加一个svg元素.attr(width,width)//设定宽度.attr(height,height);//设定高度有了画布，接下来就可以在画布上作图了。“链式语法”3.绘制矩形本文绘制一个横向的柱形图。只绘制矩形，不绘制文字和坐标轴。在SVG中，矩形的元素标签是rect。例如：svgrect/rectrect/rect/svg•上面的rect里没有矩形的属性。矩形的属性，常用的有四个：•x：矩形左上角的x坐标•y：矩形左上角的y坐标•width：矩形的宽度•height：矩形的高度要注意，在SVG中，x轴的正方向是水平向右，y轴的正方向是垂直向下的。3.绘制矩形现在给出一组数据，要对此进行可视化。数据如下：vardataset=[250,210,170,130,90];//数据（表示矩形的宽度）varrectHeight=25;//每个矩形所占的像素高度(包括空白)svg.selectAll(rect).data(dataset).enter().append(rect).attr(x,20).attr(y,function(d,i){returni*rectHeight;}).attr(width,function(d){returnd;}).attr(height,rectHeight-2).attr(fill,steelblue);enter()数的作用是返回一个新的D3()对象集合，这个集合包含了所有没有被可视化的数据。这是D3将数据与图形的联系定义的一种模式（enter-update-exit）叫作EnterMode,这段代码添加了与dataset数组的长度相同数量的矩形，所使用的语句是：svg.selectAll(rect)