D3.js树图tree 组织机构分布图

2024-09-06

用D3.js画树状图

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

【 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画思维导图（转）

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

【 D3.js 高级系列】总结

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

【 D3.js 高级系列 — 10.0 】思维导图

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

【 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 & Data Visualization & SVG

D3.js & Data Visualization & SVG https://davidwalsh.name/learning-d3 // import {scaleLinear} from "d3-scale"; // import * as d3 from "d3"; // datas const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9]; // view const w = 500; con

Python equivalent of D3.js

http://brandonrose.org/ Python equivalent of D3.js Ask Question Asked 7 years, 1 month ago Active 10 months ago Viewed 90k times 99 76 Can anyone recommend a Python library that can do interactive graph visualization? I specifically want someth

D3.js的v5版本入门教程（第十二章）—— D3.js中各种精美的图形

D3.js的v5版本入门教程(第十二章) D3中提供了各种制作常见图形的函数,在d3的v3版本中叫布局,通过d3.layout.xxx,来新建,但是到了v5,新建一个d3中基本的图形的方式变了(我也并不知道是不是还叫布局,我觉得也可以这么叫,反正布局指的也是一个绘图函数) 下面是d3中一些常见的部分图形 bubble —— 泡泡图 packing —— 打包图 bundling —— 捆图 force —— 力导向图 chord —— 弦图 pie——饼状图 tree——树状图中国地图我们利

d3.js之树形折叠树

1.效果 children和_children 2.技术分解 2.1折叠函数 // (1) 递归调用,有子孙的就把children(显示)给_children(不显示)暂存,便于折叠, function collapse(d) { if (d.children) { console.log(d); d._children = d.children; d._children.forEach(collapse); d.children = null; } } // 折叠根节点的每个孩子 root.c

用 D3.js 画一个手机专利关系图, 看看苹果,三星,微软间的专利纠葛

前言本文灵感来源于Mike Bostock 的一个 demo 页面原 demo 基于 D3.js v3 开发, 笔者将其使用 D3.js v5 进行重写, 并改为使用 ES6 语法. 源码: github 在线演示 : demo 效果可以看到, 上图左上角为图例, 中间为各个手机公司之间的专利关系图. 图例中有三种线段: 红色实线: 正在进行专利诉讼 (箭头指向方为被诉讼方) 蓝色虚线: 诉讼已经结束绿色实线: 专利已经授权实现下面让我们看看如何一步步实现上图的效果. 分析数据 [

d3.js+svg的树形图

效果图数据 { "name":"中国", "children": [ { "name":"浙江" , "children": [ {"name":"杭州" }, {"name":"宁波" }, {"name":"温州" }, {"name":&qu

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树图tree 组织机构分布图

热门专题