echart也支持拓扑树了

所需的json数据格式: children嵌套

vis.js也支持绘制拓扑树

数据格式:

nodes: {id, label, title}
edges: {from, to, label}

d3.js也可以绘制拓扑树]()

D3        属于基础的绘图库(基于 canvas 的, 所以可以说完全不做兼容考虑),封装的功能都是一些基础图形图像和动画这类的,但是功能异常强大。

Echarts 属于应用型          (或者业务型)的图表库, 期望的是: 几乎不需要写绘图过程代码就能生成漂亮的图表。

d3学习笔记参考

所需要的数据也是children传的

    var treeData =
{
"name": "Top Level",
"children": [
{
"name": "Level 2: A",
"children": [
{"name": "Son of A"},
{"name": "Daughter of A"}
]
},
{"name": "Level 2: B"}
]
};

[js]d3.js绘制拓扑树的更多相关文章

  1. d3.js 实现立体柱图

    前言 随着大数据时代的来临,数据可视化的重要性也越来越凸显,那么今天就基于d3.js今天给大家带来可视化基础图表柱图进阶:立体柱图 关于d3.js d3.js是一个操作svg的图表库,d3封装了图表的 ...

  2. D3.js 用层画条形图

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 1.在项目中使用D3.js

    在项目中使用D3.js D3.js(全称:Data-Driven Documents)是一个基于数据操作文档的JavaScript库.D3帮助您使用HTML.SVG和CSS使数据生动起来.D3对web ...

  4. 利用d3.js绘制雷达图

    利用d3,js将数据可视化,能够做到数据与代码的分离.方便以后改动数据. 这次利用d3.js绘制了一个五维的雷达图.即将多个对象的五种属性在一张图上对照. 数据写入data.csv.数据类型写入typ ...

  5. D3.js (v3)+react框架 基础部分之认识选择集和如何绘制一个矢量图

    首先需要下载安装d3.js  :  yarn add d3 然后在组建中引入 :  import * as d3 from 'd3' 然后定义一个方法,在componentDidMount()这个钩子 ...

  6. 【 D3.js 进阶系列 — 4.0 】 绘制箭头

    转自:http://www.ourd3js.com/wordpress/?p=660 [ D3.js 进阶系列 — 4.0 ] 绘制箭头 发表于2014/12/08 在 SVG 绘制区域中作图,在绘制 ...

  7. 用D3.js画树状图

    做项目遇到一个需求,将具有层级关系的词语用树状图的形式展示它们之间的关系,像这样: 或者是这样: 上面的图片只是样例,跟我下面的代码里面用的数据不同 网上有很多这种数据可视化展示的js控件,我这里选择 ...

  8. d3.js之树形折叠树

    1.效果 children和_children 2.技术分解 2.1折叠函数 // (1) 递归调用,有子孙的就把children(显示)给_children(不显示)暂存,便于折叠, functio ...

  9. 利用d3.js绘制中国地图

    d3.js是一个比較强的数据可视化js工具. 利用它画了一幅中国地图,例如以下图所看到的: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3ZhcDE=/ ...

随机推荐

  1. 金蝶K3 WISE BOM多级展开_物料齐套表

    /****** Object: StoredProcedure [dbo].[pro_bobang_ICItemQiTao] Script Date: 07/29/2015 16:12:10 **** ...

  2. EF 简单介绍<一>

    一:EF概述 Entity Framework(EF)是一个开源的“对象/关系映射(ORM:Object Relational Mapping)”框架,使应用程序可以使用一种“纯”的对象模型来访问关系 ...

  3. java实验-3

    实验内容 1.XP基础 2.XP核心实践 3.相关工具 实验内容 一.在IDEA中使用工具(Code->Reformate Code)把下面代码重新格式化,再研究一下Code菜单,找出一项让自己 ...

  4. Excel 转为 MySQL 语句

    一.方法 一.假设你的表格有A.B.C三列数据,希望导入到你的数据库中表格table,对应的字段分别是col1.col2.col3 二.在你的表格中增加一列,利用excel的公式自动生成sql语句,具 ...

  5. pyqt pyside 设置窗口关闭时删除自身

    pyqt pyside 设置窗口关闭时删除自身 self.setAttribute(QtCore.Qt.WA_DeleteOnClose)

  6. ECMAScript 6 变量的解构赋值

    1.数组的结构赋值 1.1 基本用法 可以用“模式匹配”的写法给数组的元素赋值,只要等号两边的模式相同,左边的变量就会被赋予对应的值.注意:元素的值和位置是一一对应关系,如果对应的位置没有值,就会解构 ...

  7. Vue自定义标签

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  8. 前端性能优化 —— 添加Expires头

    简要:添加Expires头能有效的利用浏览器的缓存能力来改善页面的性能,能在后续的页面中有效避免很多不必要的Http请求,WEB服务器使用Expires头来告诉Web客户端它可以使用一个组件的当前副本 ...

  9. jmeter--接口自动化jmeter+ant+jenkins

    的 一.介绍 接口自动化工具:jmeter+ant+jenkins 流程: -1.jmeter已录制或手动设置好脚本后 -2.配置ant,使用Ant工具,进行批量执行jmeter的脚本 -3.使用Je ...

  10. Node.js_express_临时会话对象 session

    临时会话对象 session 也是用来 解决 http 无状态协议的问题(无法区分多次请求是否发送自同一客户端) npm install express-session npm install con ...