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. python之鼠标的操作

    鼠标操作的方法,封装在ActionChains类中 perform:执行ActionChains中的所有存储行为 context_click:右键单击 move_to_element:悬停 doubl ...

  2. Python学习笔记三

    一. 为什么要使用函数? 函数可以方便阅读代码. 函数可以减少重复代码. 函数可以减少管理操作,减少修改操作. 二. 函数分类: 内置函数:len()   sum()   max()   min() ...

  3. 安装 Tensorflow

    环境:Ubuntu 16.04  64bit 1.    安装Anaconda Anaconda 是 Python 的一个科学计算发行版,内置了数百个Python经常会使用的库,也包括了许多机器学习和 ...

  4. 蓝桥杯 购物单(使用word协助)

    标题: 购物单 小明刚刚找到工作,老板人很好,只是老板夫人很爱购物.老板忙的时候经常让小明帮忙到商场代为购物.小明很厌烦,但又不好推辞. 这不,XX大促销又来了!老板夫人开出了长长的购物单,都是有打折 ...

  5. 蓝桥杯 全球变暖(dfs)

    标题:全球变暖 [题目描述]你有一张某海域NxN像素的照片,"."表示海洋."#"表示陆地,如下所示: 其中"上下左右"四个方向上连在一起的 ...

  6. 用Jmeter进行接口测试

    一.Jmeter 的使用步骤 打开Jmeter 安装包,进入\bin 中,找到"jmeter.bat", 点击打开即可. 在下图打开的Jmeter 页面中,右键[“测试计划” -& ...

  7. Taro使用mobx做国际化小程序

    效果 目前项目使用的是Taro做小程序开发框架,Taro可以集成mbox,当然一些正常的框架也可以集成mbox,只不过需要自己集成,或者用redux也可以用相同的思想实现. 思路 利用mbox act ...

  8. Server酱微信推送中的问题

    1.写在URL的文字就是不在微信端显示 当时为了明显提示写了个这个:<--11111-->后来发现1111不能显示,去掉两边的<---->就可以了, 2.输出到微信端的文字不换 ...

  9. [PA2014]Budowa

    [PA2014]Budowa 题目大意: 有A和B两名候选人.共有\(n(n\le1000)\)个人参加投票.他们之间形成了一个树结构,树上的结点有两种身份:专家(叶子结点)或领导(非叶子结点).每位 ...

  10. (88)Wangdao.com第二十一天_JavaScript 元素节点Element 节点

    Element 节点 (元素节点) 是一组对象 对应网页的 HTML 元素 每一个 HTML 元素,在 DOM 树上都会转化成一个 Element 节点对象(以下简称元素节点) 所有元素节点的 nod ...