d3.js 矩阵树图

2026-08-31

【 D3.js 高级系列 — 4.0 】矩阵树图

矩阵树图(Treemap),也是层级布局的扩展,根据数据将区域划分为矩形的集合.矩形的大小和颜色,都是数据的反映.许多门户网站都能见到类似图1,将照片以不同大小的矩形排列的情形,这正是矩阵树图的应用. 图1 http://www.texastribune.org/2010/10/07/treemap-reveals-campaign-ad-trends/ 现以浙江.广西.江苏三省份2013年的GDP作为数据,以GDP大小作为节点的权重将其制作成矩阵树图. 1. 数据新建一个citygdp.j

【 D3.js 高级系列】总结

高级系列的教程已经完结,特此总结. 月初的时候曾说过本月内完结高级教程,今天是最后一天,算是可以交差了.O(∩_∩)O~ 如此一来,[入门]-[进阶]-[高级]三个系列的教程算是完成了.本教程的目的在于提供一个网络的.免费的学习系列,希望大家能喜欢. 在写文章的过程中,笔者对于 D3.js 的理解也在逐步加深.因此,写在前面的文章一定比后面的文章要差,虽然部分经过了修改,但是还没有系统性修正的时间.现在三个系列的教程已经完成,接下来会花时间在修正上,尤其是入门系列,这一系列阅读量最大,但是问题也

【 D3.js 高级系列 — 2.0 】捆图

捆图(Bundle)是 D3 中比较奇特的一个布局,只有两个函数,而且需要与其它布局配合使用.本文讲述捆图的制作方法. 有关捆图的例子极少,很容易找到的是:http://bl.ocks.org/mbostock/1044242 但是此例有些复杂,不太容易弄懂,而且也没有相应的说明文字(D3官网上的例大多没有相应文字解说),根本无法作为参考.本文提供一个简单的例子,讲解捆图到底是什么,应该怎么做. 捆图只有两个函数: d3.layout.bundle():创建一个捆图布局. bundle(link

【 D3.js 高级系列 — 1.0 】文本的换行

在 SVG 中添加文本是使用 text 元素.但是,这个元素不能够自动换行,超出的部分就显示不出来了,怎么办呢? 高级系列开篇前言从今天开始写高级系列教程.还是那句话,由于本人实力有限,不一定保证入门-进阶-高级,是一级比一级难的,大家选自己需要的阅读即可. 高级系列预计会先写一些常见的小问题(如本文)和剩下的三个布局(矩阵树图.堆栈图.捆图),然后写一些较复杂的图的制作方法,以及其交互式操作,例如:思维导图.多图联动.地图的标线标注等等. 近来嗓子像火烧一样,很不舒服,希望能快点好.o(>﹏

D3.js画思维导图（转）

思维导图的节点具有层级关系和隶属关系,很像枝叶从树干伸展开来的形状.在前面讲解布局的时候,提到有五个布局是由层级布局扩展来的,其中的树状图(tree layout)和集群图(cluster layout)布局制作出来的图具有“树形”.因此,可以凭借这两种布局来制作思维导图. 1. 构造思路树状图布局,将一个具有层级关系的对象root转换成节点数组nodes时,情况如下.有一个root对象: { name: "node1", children: [ { name: "node

用D3.js画树状图

做项目遇到一个需求,将具有层级关系的词语用树状图的形式展示它们之间的关系,像这样: 或者是这样: 上面的图片只是样例,跟我下面的代码里面用的数据不同网上有很多这种数据可视化展示的js控件,我这里选择了D3.js. 首先在html页面需要包含D3的js文件,其次我们需要将数据构造成json格式,然后存入到一个d3.json文件 { "name":"如何学习D3", "children": [ { "name":"预备

D3.js 布局

布局,可以理解成 “制作常见图形的函数”,有了它制作各种相对复杂的图表就方便多了. 一.布局是什么布局,英文是 Layout.从字面看,可以想到有“决定什么元素绘制在哪里”的意思.布局是 D3 中一个十分重要的概念. D3 与其它很多可视化工具不同,相对来说较底层,对初学者来说不太方便,但是一旦掌握了,就比其他工具更加得心应手.下图展示了 D3 与其它可视化工具的区别: 可以看到,D3 的步骤相对来说较多.坏处是对初学者不方便.也不好理解.好处是能够制作出更加精密的图形.因此,我们可以据此定义

ECharts使用心得——矩阵树图

1. 缘起最近实验室 boss 让用矩形树图做一下研究数据的展示,囧,矩形树图是什么鬼.问了问师兄,说用 R 语言可以实现,让我去研究一下. = =,那这周不是不用干别的了. 刚好最近在研究百度出的 ECharts ,搜了搜竟然有矩形树图的模块,真是感动啊眼泪都要出来了.立马研究了一下,结果还可以,能实现我要的效果. 就在博客里总结一下吧,希望对你有帮助. 2.1 用 ECharts 实现矩形树图(treemap)-- 知识普及什么是矩形树图? 通常,我们使用缩进方式展现层次结构的层级,比如

【 D3.js 入门系列 --- 9 】常见可视化图形

本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. Layout ,直译为"布局,安排".但在 D3 中不是这个意思. D3 中有非常多 Layout 函数,它们不是为了在画面中布局什么.在 D3 中是对输入的数据进行转换,转换成比較easy进行可视化的数据.实际进行可视化时,须要其它的代码.我们能够简单地把 Layout 理解为"制作常见图形的函数",比方饼状图等等. D3 中一共

D3.js系列——交互式操作和布局

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

D3.js学习（七）

上一节中我们学会了如何旋转x轴标签以及自定义标签内容,在这一节中,我们将接触动画(transition) 首先,我们要在页面上添加一个按钮,当我们点击这个按钮时,调用我们的动画.所以,我们还需要在原来的基础上添加两个东西. 添加一个按钮 <div id="option"> <input name="updateButton" type="button" value="Update" onclick="

D3.js学习（一）

从今天开始我将和大家一起学习D3.js(Data-Driven Documents),由于国内关于D3的学习资料少之又少,所以我觉得很有必要把自己学习过程记录下来,供同学们参考,如果文章有有哪些表达有错误的还希望同学们帮我指出来.当然了, 可以的话我希望大家都可以去看看英文资料(文章后面将列英文资源),毕竟那才是原汁原味的D3. 好了, 废话到此,下面我们开始我们的学习之旅吧! 什么是D3.js? 一句话:D3.js是一个操纵数据的javascript库! 从一个简单的例子开始学习一个新的东西

D3.js学习记录

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta h

D3.js部署node环境开发

总结一段D3.js部署node环境的安装过程准备阶段: 首先电脑上要安装node环境,这个阶段过滤掉,如果node环境都不会装,那就别玩基于node环境搞的其他东西了. 搭建环境: 我在自己的F:系统盘创建一个工程目录d3Node,然后创建一个package.json文件,里面配置如图: 其中:dependencies字段描述了你的工程所用到的库运行时的依赖,他们可以使你的工程在浏览器中正常运行.在d3中只有一个依赖,d3是D3在npm库中发布的名字,其中版本号3.x标明该工程可以兼容任意大于

d3.js读书笔记-1

d3.js入门 d3入门 D3是一个强大的数据可视化工具,它是基于Javascript库的,用于创建数据可视化图形.在生成可视化图形的过程中,需要以下几步: 把数据加载到浏览器的内存空间: 把数据绑定到文档中(这里的文档指的是html文档)的元素,根据需要创建新元素: 解析每个元素范围内的数据并为其设置相应的可视化属性,实现元素的变换(transforming); 响应用户输入实现元素状态的过渡(transitioning); SVG D3最适合用来生成和操作SVG(Scalable Vecto

【 D3.js 进阶系列 — 6.1 】缩放的应用（Zoom）

缩放(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.

[资料搜集狂]D3.js数据可视化开发库

偶然看到一个强大的D3.js,存档之. D3.js 是近年来十分流行的一个数据可视化开发库. 采用BSD协议源码:https://github.com/mbostock/d3 官网:http://d3js.org/ 中文资料:http://www.ourd3js.com/ C3.js是一个基于D3.js的图表库. https://github.com/masayuki0812/c3 http://c3js.org/ 附:

D3.js 用层画条形图

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>testD3-3-drawingDivBar</title> <script type="text/javascript" src="http://localhost:8080/spring/js/d3.js"></script> &

【 D3.js 入门系列 --- 3 】做一个简单的图表！

前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为可缩放矢量图形(Scalable Vector Graphics),SVG 使用 XML 格式定义图像,不清楚什么是SVG的朋友请先在 w3cschools 学习下,内容很少,很快就能掌握,不需要记住各种标签,只要知道大概是什么就行,用的时候再查. 先看下面的代码: <script src="

【 D3.js 入门系列 --- 2.1 】关于如何选择，插入，删除元素

在D3.js中,选择元素的函数有两个:select 和 selectAll . 先说明一下它们的区别: select 是选择所有指定元素的第一个 selectAll 是选择指定元素的全部(以用于后面同时操作) 来看一个具体的例子,现有如下代码: <html> <head> <meta charset="utf-8"> <title>select,append,exit</title> </head> </

d3.js 矩阵树图

热门专题