进阶系列的文章从去年10月开始写的,晃眼又是4个多月了,想在年前总结一下. 首先恭祝大家新年快乐.今年是羊年吧.前段时间和朋友聊天,聊到十二生肖里为什么没猫,我张口就道:不是因为十二生肖开会的时候猫迟到了吗? 呵呵,不知道这是谁给我灌输的观点.o(>﹏<)o 进阶系列的文章分为两部分,文章前括号里写有: [D3.js 进阶系列] [D3.js 选择集与数据详解] 虽然称之为"进阶",但并不是说一定要看完"入门"才能看.由于本人能力有限,不能很好地整理成由…

转自:http://www.ourd3js.com/wordpress/?p=660 [ D3.js 进阶系列 — 4.0 ] 绘制箭头 发表于2014/12/08 在 SVG 绘制区域中作图,在绘制直线和曲线时,常需要在某处添加箭头.本文介绍如何在 D3 中给直线和曲线添加箭头. 到目前为止,我们绘制 D3 的图表都是在 SVG 绘制区域内,虽然 D3 也可用 Canvas 或 WebGL 等作图,但 SVG 是最常用的.那么,用 D3 来绘制箭头,先要明白在 SVG 中是怎么绘制的. 1.…

CSV 表格文件是以逗号作为单元分隔符的,其他还有以制表符 Tab 作为单元分隔符的 TSV 文件,还有人为定义的其他分隔符的表格文件.本文将说明在 D3 中怎样读取它们. 1. TSV 表格文件是什么 TSV(Tab Separated Values),制表分隔值,它和 CSV 文件不过分隔符不一致.它的格式例如以下: name age 张三 22 李四 24 2. D3 中读取 TSV 文件 在 D3 中读取 TSV 文件的方法和 CSV 文件是一样的,仅仅要更改一下函数名就可以.方法例如以…

在入门系列的教程中.我们经常使用 d3.json() 函数来读取 json 格式的文件.json 格式非常强大.但对于普通用户可能不太适合,普通用户更喜欢的是用 Microsoft Excel 或 OpenOffice Calc 等生成的表格文件,由于简单易懂,easy编辑. Microsoft Excel 一般会保存为 xls 格式. OpenOffice Calc 一般会保存为 ods 格式. 这些格式作为表格文件来说都非常强大.但要读取它们是有些麻烦的.D3 中也没有提供这个方案.可是表格…

在 D3 中使用 d3.csv 读取 CSV 文件时,有时会出现乱码问题. 怎么解决呢? 1. 乱码问题 使用 d3.csv 读取 xxx.csv 文件时.假设 xxx.csv 文件使用的是 UTF-8 编码,不会有什么问题. 当然,个人觉得尽量使用 UTF-8 编码,能够在同一编码内使用各国文字. 可是.假设 xxx.csv 文件使用的是 utf-8 编码,使用 Microsoft Excel 打开的时候,可能会出现乱码,由于国内的 Excel 默认使用 GB2312 打开.并且在打开的时候不…

缩放(Zoom)是另一种重要的可视化操作,主要是使用鼠标的滚轮进行. 1. zoom 的定义 缩放是由 d3.behavior.zoom() 定义的. var zoom = d3.behavior.zoom() .scaleExtent([1, 10]) .on("zoom", zoomed); function zoomed() { circles_group.attr("transform", "translate(" + d3.event.…

本章讨论在力学图中经常使用到的事件( Event ),然后对[p=555">进阶 - 第 2.0 章]的人物关系图进行改进.使用户可以固定拖拽的对象. 在[入门 - 第 9.2 章]和[进阶 - 第 2.0 章]中,都用到了下面代码: force.on("tick", function(){ }); 这里的 force 是之前代码中定义的布局( Layout ).tick 表示当运动进行中每更新一帧时. 这是力学图中最常使用的事件,用于设定力学图每一帧是怎样更新的.除此…

本文讲解稍微复杂一些的拖拽应用,即拖拽饼图的各部分. 在[入门 - 第 9.1 章]讲解了如何制作饼状图.饼状图的各部分是用具有宽度的弧线来表示的.在与用户进行交互的时候,如果每一部分都能拖拽,是很有趣的. 1.饼状图的绘制 与[入门 - 第 9.1 章]稍有有些不同,我们对饼状图的每一个区域都使用一个 g 标签将其包围起来,以便平移操作. var gAll = svg.append("g") .attr("transform","translate(&q…

直方图用于描写叙述概率分布,D3 提供了直方图的布局 Histogram 用于转换数据. 假设有数组 a = [10, 11, 11.5, 12.5, 13, 15, 19, 20 ],如今把10~20的数值范围分为5段,即: 10~12, 12~14, 14~16, 16~18, 18~20 那么数组 a 的各数值都落在这几段区域的哪一部分呢?经过计算,能够知道,这5段分别具有的元素个数为: 3, 2, 1, 0 , 2 将这个用图形展示出来的,就是直方图.好了,開始制作吧~ 1. 数据 首先…

力学图的布局中有非常多參数.本文将逐个说明. D3 中的力学图布局是使用韦尔莱积分法计算的.这是一种用于求解牛顿运动方程的数值方法,被广泛应用于分子动力学模拟以及视频游戏中. 定义布局的代码例如以下: var force = d3.layout.force() 就可以.D3 中提供了 17 个函数用于设定其參数和事件.在全部布局中是最多的,以下将对其进行说明. size() 用于设定力学图的作用范围.用法为 force.size( [ x , y ] ),这个函数用于指定两件事: 重力的重心位置…