比例尺是 D3 中很重要的一个概念.绘制图形时直接用数值的大小来代表像素不是一种好方法,本章正是要解决此问题. 一.为什么需要比例尺 上一章制作了一个柱形图,当时有一个数组,绘图时,直接使用 250 给矩形的宽度赋值,即矩形的宽度就是 250 个像素.此方式非常具有局限性,如果数值过大或过小,例如: var dataset_1 = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ]; , , , , ]; 对以上两个数组,绝不可能用 2.5 个像素来代表矩形的宽度,那样根本看不见:也…

D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档.听名字有点抽象,说简单一点,其实就是一个 JavaScript 的函数库,使用它主要是用来做数据可视化的. D3 提供了各种简单易用的函数,大大简化了 JavaScript 操作数据的难度.由于它本质上是 JavaScript ,所以用 JavaScript 也是可以实现所有功能的,但它能大大减小你的工作量,尤其是在数据可视化方面,D3 已经将生成可视化的复杂步骤精简到了几个简单的函数,你只需要…

D3.js 是个神奇的工具,下面收集了一些与星星相关的可视化的例子,静待慢慢的把坑填上 雷达图http://bl.ocks.org/kevinschaul/8213691      星空 二维(一)http://bl.ocks.org/nitaku/9607405  星空 二维(二)https://bl.ocks.org/mbostock/c7e85d2b47d11982db38  星空 地图 http://armchairastronautics.blogspot.jp/p/skymap.ht…

一.元素操作: 1.选择元素 select 和 selectAll,以及选择集的概念 var p = d3.select("body").select("p") // 使用 select ,参数传入 p 即可,如此返回的是第一个 p 元素 var p = d3.select("body").selectAll("p") // 使用 selectAll 选择 body 中所有的 p 元素 var p = d3.select(&q…

一.打包图 打包图( Pack ),用于表示包含与被包含的关系,也可表示各对象的权重,通常用一圆套一圆来表示前者,用圆的大小来表示后者. 1.布局(数据转换) var pack = d3.layout.pack() .size([ width, height ]) .radius(); 第 1 行:打包图的布局 第 2 行:size() 设定转换的范围,即转换后顶点的坐标(x,y),都会在此范围内. 第 3 行:radius() 设定转换后最小的圆的半径. 读取数据并转换的代码 d3.json(…

一.饼状图 在布局的应用中,最简单的就是饼状图. 1.数据 有如下数据,需要可视化: , , , , ]; 这样的值是不能直接绘图的.例如绘制饼状图的一个部分,需要知道一段弧的起始角度和终止角度,这些值都不存在于数组 dataset 中.因此,需要用到布局,布局的作用就是:计算出适合于作图的数据. 2.布局(数据转换) 定义一个布局: var pie = d3.layout.pie(); 返回值赋给变量 pie,此时 pie 可以当做函数使用. var piedata = pie(dataset…

一.弦图 1.弦图是什么 弦图(Chord),主要用于表示两个节点之间的联系的图表.两点之间的连线,表示谁和谁具有联系. 2.数据 初始数据为: var city_name = [ "北京" , "上海" , "广州" , "深圳" , "香港" ]; var population = [ [ , , , , ], [ , , , , ], [ , , , , ], [ , , , , ], [ , , ,…

一.图表交互操作 与图表的交互,指在图形元素上设置一个或多个监听器,当事件发生时,做出相应的反应. 交互,指的是用户输入了某种指令,程序接受到指令之后必须做出某种响应.对可视化图表来说,交互能使图表更加生动,能表现更多内容.例如,拖动图表中某些图形.鼠标滑到图形上出现提示框.用触屏放大或缩小图形等等. 用户用于交互的工具一般有三种:鼠标.键盘.触屏. 添加交互:对某一元素添加交互操作十分简单,代码如下: var circle = svg.append("circle"); circle…

一.动态效果 D3 支持制作动态的图表.有时候,图表的变化需要缓慢的发生,以便于让用户看清楚变化的过程,也能给用户不小的友好感. 1.什么是动态效果 前面制作的图表是一蹴而就地出现,然后绘制完成后不再发生变化的,这是静态的图表. 动态的图表,是指图表在某一时间段会发生某种变化,可能是形状.颜色.位置等,而且用户是可以看到变化的过程的.例如,有一个圆,圆心为 (100, 100).现在我们希望圆的 x 坐标从 100 移到 300,并且移动过程在 2 秒的时间内发生.这种时候就需要用到动态效果,在…

坐标轴(Axis)   坐标轴(Axis)在很多图表中都可见到,例如柱形图.折线图.散点图等.坐标轴由一组线段和文字组成,坐标轴上的点由一个坐标值确定.但是,如果使用SVG的直线和文字一笔一画的绘制坐标轴,工作量将会极其的大.D3提供了坐标轴的制作方法,需要之前所给大家讲的比例尺一起使用.开发者仅仅需要几行代码,就能够生成各式各样的坐标轴.   与坐标轴相关的方法有:   d3.svg.axis() : 创建一个默认的新坐标轴.   axis(selection) : 将此坐标轴应用到指定的选择…