[js]d3.js绘制拓扑树

echart也支持拓扑树了

1312420-20190108110914775-1624351308.png

所需的json数据格式: children嵌套
1312420-20190108111025399-851067666.png

vis.js也支持绘制拓扑树

数据格式:

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

1312420-20190108111233844-353354809.png

1312420-20190108111323396-681341463.png

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

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

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

d3学习笔记参考
1312420-20190108111405906-434371354.png

所需要的数据也是children传的

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

转载于:https://www.cnblogs.com/iiiiiher/p/10237898.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值