参考资料:
1. 交互图表之提示条
2. 交互式之提示框
效果图:
源码:
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+p...
分类:
Web程序 时间:
2015-06-16 13:00:48
阅读次数:
238
JavaScript可视化图表库D3.js API中文参考,d3.jsapi
D3 库所提供的所有 API 都在 d3 命名空间下。d3 库使用语义版本命名法(semantic versioning)。 你可以用 d3.version 查看当前的版本信息。
d3 (核心部分)
选择集
d3.select - 从当前文档中选择一系列元素。
d3.selectAll - 从当...
Everything in D3 is scoped under the d3 namespace.
D3 uses semantic versioning. You can find the current version of D3 as d3.version.
See one of:
Behaviors - reusable interaction behavi...
数据可视化数据可视化是如何把数据更好的展现出来的一个课题,在大数据出现后,它变得更为重要和迫切。
以前使用excel进行柱状图、饼状图、折线图等是最常用的数据可视化手段之一,而在WEB端,使用流行的extjs、fusioncharts、jfreechart,或者相对不太流行的amchart、highcharts、Bootstrap里的charts、jquery的一些插件等等都可以实现饼状图等的展示...
分类:
Web程序 时间:
2015-05-19 14:53:47
阅读次数:
585
D3js的chord图提供了展示元素之间联系的一个很好渠道,但是维度不够多,下图是常见搜索案例(http://bl.ocks.org/mbostock/4062006):这背后的数据其实是一个矩阵:varmatrix=[[11975,5871,8916,2868],[1951,10048,2060,6171],[8010,16145,8090,8045],[1013,990,940,6907]];数..
分类:
Web程序 时间:
2015-05-14 14:28:50
阅读次数:
194
D3js的chord图提供了展示元素之间联系的一个很好渠道,但是维度不够多,下图是常见搜索案例(http://bl.ocks.org/mbostock/4062006): ![在此输入图片描述][1] 这背后的数据其实是一个矩阵: var matrix = [ [11...
分类:
Web程序 时间:
2015-05-14 12:24:44
阅读次数:
213
颜色是作图不可少的概念,常用的标准有 RGB 和 HSL,D3 提供了创建颜色对象的方法,能够相互转换和插值。RGB色彩模式是通过对红(Red)、绿(Green)、蓝(Blue)三个颜色通道相互叠加来得到各式各样的颜色。三个通道的值的范围都为0~255,因此总共能表示16777216(256 * 256 * 256)种,即一千六百多万种。几乎包括了人类所能识别的所有颜色,是最广泛也是最容易理解的颜...
分类:
Web程序 时间:
2015-04-19 19:29:24
阅读次数:
116
大数据时代数据可视化成为理解和表达数据的有效甚至是唯一的手段。
工欲善其事必先利其器,本文对55个流行的数据可视化工具开源协议,主页,文档,案例等资源的简介,其中包括著名的D3.js,R,Gephi,Raphaël,Processing.js,Tableau Public,Google Chart Tools,Arbor.js等...
分类:
其他好文 时间:
2015-04-07 21:38:04
阅读次数:
346
CORS http://caniuse.com/#search=corsFoundation http://foundation.zurb.com/docs/sass.htmlD3 http://d3js.org/Generator https://github.com/yeoman/generat...
分类:
其他好文 时间:
2015-04-03 14:50:15
阅读次数:
108
我们常常使用常规图表(直方图,折线图等)来表现数据。为了清楚的表示数据在数轴上的哪个数值区间,会直接在矩形和点上标注数值。除了这个办法外,还可以使用色调偏淡的网格作为背景参照。本文介绍了如何使用D3绘制网格线的小技巧: 绘制效果: 思路很简单:1 绘制SVG容器。2 给SVG分组,并设置分组的样式类。3 为分组分别添加横线和竖线。 关键技术介绍(1) 生成一个10元素的数组:(2) 定义x和y比例...
分类:
Web程序 时间:
2015-03-20 22:01:17
阅读次数:
250