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. Discovery Scanning

    1.NetDiscover you performe layer 2 the comand  : netdiscover -r 192.168.2.0/24   or use   netdiscove ...

  2. javac编译后运行提示找不到或无法加载主类

    第一种常见错误: package demo_01; public class hello { public static void main(String[] args) { System.out.p ...

  3. Visual Studio 2013 突然不高亮,编译报错

    同事的电脑,估计是windows更新失败的原因,C盘容量减小到不到1G,VS的高亮也坏了,重启后硬盘容量增加了但是仍然不高亮. 解决办法记录一下: 重置下. 开始菜单 -->所有程序--> ...

  4. xstream实现对象的序列化和反序列化(Java)

    概述 最新整理Java方面XML序列化和反序列化的常用工具类,找到了dom4j和xstream.dom4j相对小巧,很好的解读xml:但是对于对象的xml序列化和反序列化,我还是比较喜欢xsteam( ...

  5. 关于ajax请求数据,并将数据赋值给全局变量的一些解决方法

    在使用ajax请求数据是,开始的时候是打算将ajax的数据取出,并赋予给全局变量,但是在实际编码过程中发现并不能将数据赋予给最开始定义的全局变量,出现这个问题的原因是由于ajax异步加载的原因,所以只 ...

  6. 2018-2019-1 20189201 《LInux内核原理与分析》第七周作业

    我的愿望是 好好学习Linux 一.书本第六章知识总结[进程的描述和进程的创建] 基础知识1 操作系统内核实现操作系统的三大管理功能,即进程管理功能,内存管理和文件系统.对应的三个抽象的概念是进程,虚 ...

  7. Microsoft Office Word 中的公式自动编号

    先插入公式,#,插入题注(交叉引用),生成了标号.此时整个公式是题注样式.在公式和标号之间插入一个样式分隔符. ____________________________________________ ...

  8. Java内存溢出异常(上)

    上一篇文章我们讲了JVM运行时数据区域与内存溢出异常,其中对于内存溢出异常这部分将的不够详细,这篇文章将着重讲解Java内存溢出异常的相关知识.如果有没看过上一篇文章的小伙伴们,请点击Java内存区域 ...

  9. 拷贝JAR包

    package com.cici; import java.io.File; import java.io.FileInputStream; import java.util.ArrayList; i ...

  10. 重新学习Java的开始~

    安装jdk的步骤及解释已经在这篇文章中详细阐述了,如下: http://www.cnblogs.com/godtrue/p/4338323.html 1.如何安装库源文件--摘自coreJava 库源 ...