搜索
D3使用方式1、D3使用到的数据格式如何获取JSON数据在D3中有专门获取JSON文件的方法：在此个人并不是很推荐这种方法。因为实际上这是一种基于AJAX通信的方法，意味着你必须将JSON文件首先上传至服务器端。这对于前期的学习而言，并不方便。换言之，我们有更加实用的方法——直接加载javascript文件。首先我们可以创建一个JS文件:我们将其取名为jsondata.js。然后我们在前端网页加载此js文件此时js文件中的data是全局变量。在新的javascript标签中，我们不妨验证一下2、从最基本的D3语句开始在D3中，selection是一个重要的概念。（至于selection如何翻译，仁者见仁）说得通俗一点，我们想将数据放置在某个元素内进行操作，离不开对元素的选择。这样，我们通过对基本网页端元素的操作，来完成最基本的数据可视化的实现。不妨先让我们的JSON数据更加丰富一点：接下来，我们正式开始使用D3语句了。在script标签下中，我们定义一个名为show的方法，形参来自全局变量data（上一节提到过）在D3中，这种名为“cascade”(或者直译为瀑布流)式的代码风格是典型而普遍存在的。瀑布流中的每一行的方法，都选定了某一个selection，以便我们进行下一行的操作。d3.select(body)我们选择了body这个元素标签;.append(ul)然后我们在body中添加ul标签。但注意，此时我们的selection不再是body，而是ul。从.selectAll(li)开始，似乎就有点必须走形式主义的意思了。在此，我们选择了一组实际上并不存在的li标签。看的出来，这组li才是真正要在其中进行数据操作的标签。然后实际上我们的selection是空的，你可以理解为一个后台的数组，随时准备着接收来自json的数据。.data(data.member)顺理成章的，接下来就是data数据。这里我们需要注意一点，随之产生的后台数组的长度也是视data数据中的数组长度而定。如果我们选择data，不是data.member，实际上我们得不到所需要的长度，也即member值4。后台数组的长度就会出现问题。这其中的原因，各位应该感觉的出来。.enter现在我们需要一个实际的selection，存放接收了data.member的数组。我们称之为enterselection。可以理解为一个把数据从后台搬到前端的过渡selection，很快我们就可以把数据再转移到li标签中了。.append(li)我们创建li标签，实际上它是个数组。每一个li标签，都包含着对应的data.member中的一组成员数据。.text(function()d{})在li的text中，我们利用回调函数，对每一个li标签中的成员数据进行简单的操作。此时函数的形参，已经是进入每个li标签的data.member的成员数据了。某种程度上说，这种形式确实有点古怪。然而随着我们对D3了解与使用的增多，这些也会变得见惯不怪了。DEMO展示从最基本的D3语句开始2上一节，我们接触到了基本的D3语句。对JSON中的数据进行了一些简单的操作。这一节，我们稍微更上一层楼点，通过改变标签style（主要是针对div啦），让数据的表现更为形象一些。跟上一节的方法相比，语法上几乎没有什么特别需要关注的。熟悉HTML以及JQUERY，应该很快理解到新加的几个方法的含义。.attr(class,)旨在改变标签的class属性。.selectAll(.age_bar)选择一组class=age_bar的标签。.style(,)旨在改变标签的style。可以添加自定义的CSS，使得展示出来的东西更加美观。2、SVG——D3.js真正有用武之地的格式通过前两节，或许你已经感觉到了，通过HTML的那些基本标签来展示数据的可视化，功能实在有限。不错，D3.js之所以强大离不开同样强大的SVG。（当然了，在HTML5日渐风靡的今天，canvas的使用越来越多。这完全看个人偏好）简要介绍下SVG网络上对于SVG的概括是：基于XML，用于描述二维矢量图形的一种图形格式。如果将D3.js理解为画家，那么SVG就是为画家提供的画板，纸张，油笔等等。在此，也就不对SVG进行更为细节的介绍了。随着教程的深入，各位对于SVG的里了解也会逐渐加深。从创建SVG标签开始.append(svg)添加SVG。任何SVG图形的表现都必须在SVG内部实现。.attr(width,300)注意与HTML标签的区别。svg标签的许多属性是没有“px”的。在这里我们添加circle元素，每个circle元素包含着一组data.member的成员数组。创建坐标系若想将需要的数据表示在页面上，必定需要坐标系，这样数据才能找到属于自己的指定位置。在D3中，对于坐标系的考虑要比我们在学习数学时对坐标系更加复杂些。因为我们不仅要定义数学意义上的可视范围，还要定义网页像素意义上的可视范围。如上，这种D3钟爱的cascade风格，古怪的定义变量方式出现了。还是那句老话，熟悉了也就见惯不怪了。d3.scale.linear()D3专门提供的创建可视范围的方法。（也可理解为创建坐标系的方法，但个人理解更倾向于可视范围的理解）。linear表示坐标的变化是线性的，不是对数形式之类。.range([20,280])网页像素意义上的可视范围。表示可视范围是从20px-280px。（先不用管是横向的还是纵向的）.domain([20,50])数学意义上的可视范围。在这里横坐标的数学意义是年龄，从我已有的数据来看，20-50已经足够囊括所有的数据了。同理我们可以创建y轴的可是范围横纵的可视范围就这样被确定了。但实际上除了你自己，网页并不知道它的实际意义。你必须告诉他怎么使用它。让数据在你的坐标轴上确定如我们数学所知，一个圆被确定，只需要知道它的横纵坐标及其半径。.attr(cx,function(d){returnx_scale(d.age)})圆的横坐标，我们使用一个回调函数确定。如我们熟悉，形参是data.member中特定的某个成员数组。返回值是以年龄作为输入的x_scale方法的返回值。它表示了数学意义上的某个值——年龄，也指定了实际像素意义上的某个值。这么说确实有点拗口，限于自己的文学修养，各位还是多多消化消化。这里要补充说明一点，因为知道属性cx，此时电脑才知道x_scale是横向的可视范围。纵坐标的确定就无需重复说明了。.attr(r,5)确定圆的半径。这里问一个问题，这里的5代表的是数学意义上的还是实际像素意义上的，还是另有意义？3、坐标系可视化为了让图形显示更加规范，我们往往需要可视的坐标系说的通俗一点，现在我们需要添加数学意义上的，可以显示的坐标系。而上一节我们所创建的坐标系，只是将数学意义上的点映射到网页端像素意义上的某个点上。D3已经有了专门创建坐标系的方法实际上这个方法就是使得之前已经生成的x_scale可显示。并外加一些节点的标示。在这里你或许会疑问生成的坐标系如何确定是横向的或是纵向的。在这里，默认是横向的。接着，我们让其在页面显示出来这里出现了我们考虑到的情况，为了确保是纵向的，我们需要添加一步.orient(left)其余的部分与横坐标系的添加几乎没有差别。4、为坐标系创建样式表与标题增加样式表利用chrome默认的对svg的渲染功能，出来的效果简直可以用“惨不忍睹”来形容。显然SVG是允许利用样式表对SVG元素进行样式调整的。不过，一些常用的CSS属性可能与传统中的不同。需要注意的是，通常情况下，color属性不能对元素的色调进行修改我们对已有的一些元素进行样式调整。代码如下：你似乎很快就发现了，元素的颜色是通过stroke跟fill与定义的。stroke代表着边缘颜色，有点类似于border-color，而fill代表着填充颜色。这里重点是坐标轴的样式设计，可以看出，class为y__axis,x__axis的坐标轴还包含着子元素的path，它的样式，决定了两条横纵轴线的样式，而父元素本身，只是决定段点处数字的样式。（甚至连这个都无法用color来定义，笔者表示很无语）。另外，类名是tick的元素似乎是默认的，它的样式定义决定在坐标轴每个段点上是否会有的标示。增加标题标题的增加显得比较简单，重点是标题位置的确定。因为横坐标的标题是横向显示，这里对位置调整稍显容易一些。只需要对其x与y属性进行调整而纵坐标的显示，为了让其纵向显示，我们必须增加旋转。在transform属性里面有rotate这一函数，其包括三个参数，第一个参数是旋转的角度，二三个参数则代表着锚的坐标。（应该是很好理解的）然后，我们再对标题稍加样式。5、路径的添加变量lineSVG中传统的路径生成实际上是比较复杂的，不仅涉及到点的坐标，还涉及到一些参数。总之笔者是感觉非常生涩，没怎么搞懂的。有兴趣的童鞋可以参见这个地址：SVG-path利用D3，事情就变得简单的多了。D3提供了专门的路径生成函数d3.svg.line()。用法跟我们之前生成坐标轴的方法没有多大区别。只是各自有各自的属性，需要自己加以区分。我们首先创建一个line变量显然，变量line在稍后就要被使用到，并且是作为一个函数，它的参数便是我们要使用到的数据。而二三两行，在之前生成circle的语句中你应该见过类似的了，应该明白其中的含义。然后我们将svg的path元素与我们的line变量整合起来。实际上，line变量所有的内容都是体现在path元素的d属性上。然后，我们需要修改一下path的样式6、d3.js之简单动态变化数据的更新上一节，我们简单的讨论了路径的生成。在实际应用中，往往需要路径的动态的变化。动态的变化涉及到数组新的数据的输入，同时也可能涉及到不需要的数据的丢弃。javascript中提供了如下方法。向data数组中加入新的数据将data数组中最头端的数据抛出知道了如何对数组进行更新，我们需要做的只是在适当的时候对路径进行更新即可路径的更新我们需要在之前的show()方法中添加一个路径更新的方法。在路径更新结束的时候，继续调用这个路径更新方法，使之进入递归的状态。这样，看上去图像就在不断的动态变化。这样定义路径更新的方法，需要一些必要的参数。path中的transition代表着路径需要进行更新。duration表示更新速率。第三句我们在上一节已经见过，这是路径具体的部署。最后一句则是在结束时候重新调用路径的更新方法。其效果如下：数据以队列的形式变化，理论上路径应该逐步向左移动，这个动态图很难反映出这一变化。但实际上就是的，我们需要调整路径更新方法中语句的顺序。这样看起来就形象多了。