摘要:
目标 在这一章,我们将学习如何使SVG坐标空间是动态的,这样我们的数据可视化不论数据是什么,都始终是可见的。 我们会使得SVG坐标空间尺度上调或下调来适于我们的数据。三个SVG长方形 我们就从三个长方形作为开始: 1 var jsonRectangles = [ 2 { "x_axis": 10, "y_axis": 10, "height": 20, "width":20, "color" : "green" }, 3 { "x_axis": 40, & 阅读全文
摘要:
目标 在这一章,我们将会重温SVG图形,学习如何使用D3.js来创建这些图形。 这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性。使用D3.js画一个SVG 的 圆 circle 可以使用如下代码创建: 我们在前面的章节已经讲过了使用D3.js来创建SVG圆形。var jsonCircles = [{"x_axis":30,"y_axis":30,"radius":20,"color":"greeen"},{"x_axis":70,"y_ax 阅读全文
摘要:
目标在这一章,你将会理解如何对数据进行结构化,来更好的使用D3.js。 我们将会回顾我们之前已经学习的,学习D3.js如何使用选集(selections),JavaScript对象基础,以及如何最优的结构化数据。到目前我们已经学到了哪些? 到目前,我们使用D3.js完成的例子都包含一个定义在最上方的数据集:var spaceCircles = [30,70,110];这个spaceCircles变量是一个JavaScript数组。数组就是一个变量的枚举列表。这也就意味着,每一个元素都附有一个索引值与其对应,且索引值是从0开始。对于spaceCircles,我们在JavaScript控制台输入如 阅读全文
摘要:
目标 在这一章,你将要使用D3.js基于一些数据把SVG元素添加到你想要的坐标位置上。 我们的目标就是使用下面的数据集:1 var spaceCircles = [30,70,110]; 并使用D3.js来对这些数据进行可视化:数学/图形 坐标空间(Mathematical/Graph Coordinate Space) 在我们使用D3.js基于一些数据把SVG元素添加到指定的坐标位置之前,我们先来讨论下坐标空间。 我们了解一些基础数学中的基础数学图形(mathematical graphs). 这些图形都是画在长方形的、二维平面空间。 这些图形的坐标空间中,x=0,y=0的坐标... 阅读全文
摘要:
目标 在这一章,你将会使用D3.js,基于我们的数据来把SVG元素添加到网页中。这一过程包括:把数据绑定到元素上,然后在使用这些元素来可视化我们的数据。 注意:不同于前几章,我们从一个完整的代码开始,然后去一步步理解它,从这一章开始,我们将会从零开始构建我们的数据可视化。 我们的目标是使用这个数据集:1 var circleRadii = [40,20,10]; 然后用D3.js来将这个数据集进行数据可视化。SVG的Circle元素 首先我们要知道的是SVG的Circle元素是什么?它是怎么定义的? SVG的Circle元素是一个基本的SVG图形元素。基本图形元素(Basic sh... 阅读全文
摘要:
简单例子 在这个例子中,你将会使用D3.js来将数据绑定到DOM元素上。然后再使用D3.js利用绑定到DOM元素上的数据来更新网页。 在上一章中,我们以下面这个页面作为开始的:1 2 3 4 5 6 7 8 然后我们又使用JavaScript控制台把数据绑定到HTML元素上:1 var theData = [1,2,3]2 3 var p = d3.select("body").selectAll("p")4 .data(theData)5 .enter()6 .append("p")7 .te... 阅读全文
摘要:
开始学习D3.js,网上没有找到很满意的中文教程,但是发现了一个很好的英文教程,讲解的非常详细。从一个初始简单的HTML网页开始,逐步加入D3.js的应用,几乎是逐句讲解。学习的时候,就顺便翻译成中文,来和大家分享 。当然,更推荐看英文原文教程了,点击这里。简单例子在这个例子中,你将会使用D3.js来把数据绑定到简单网页的DOM元素(DOM element)上。现在开始了!下面是一个简单的HTML网页:1 2 3 4 5 6 7 8 打开Chrome的开发者工具进入JavaScript控制台,观察元素查阅器(inspector)。在JavaScr... 阅读全文
摘要:
使用SAX解析XML文件。XML文件有1.5G,程序抛出了这个问题:org.xml.sax.SAXParseException; lineNumber: 1; columnNumber: 1; 语法分析器在此文档中遇到多个 "64,000" 实体扩展; 这是应用程序施加的限制。参考来源:http://blog.csdn.net/a_heng/article/details/4566841查了查,原来是在单个xml文件中实体引用超过了默认值64000个。你用dom和sax解析XML都可能会遇到这个问题,这印证了我的猜测,java的dom是用sax来实现的。解决方法很简单,运行 阅读全文
摘要:
Eclipse出现了 “Syntax error, parameterized types are only available if source level is 1.5 or greater”的报错。于是百度了一下,其中有一个看似很靠谱的方法是:windows->Preference->Java Compiler,然后把java compiler的编译器版本选到1.6以上。可是当我这么做了之后发现,我的java compiler本来就是默认1.6,那是怎么回事?解决办法:右击项目->Properties->Java compiler->选择1.5或更高版本。 阅读全文
摘要:
類的每個對象有自己的所有數據成員的副本,有事類的所有對象應該共享變量的一個副本,以此可以使用static類變量。紀實類沒有一個對象,其static成員依然存在。 阅读全文