本示例是基于Typescript 和 D3 五版本绘制树状图。
网上绝大多数都是D3 3版本,四版本也有一些示例,比较少,5版本几乎没有。这里是结合TS 和 D3 5版本的一个示例:
直接上代码:
/**
* create by yanle
* create time 2018-10-30 15:21
*/
import {hierarchy, tree} from "d3-hierarchy";
import {DefaultLinkObject, line, Link, linkHorizontal, linkVertical} from "d3-shape";
import {select, selectAll} from "d3-selection";
class Demo8 {
private treeData: any = {
"name": "中国",
"children":
[
{
"name": "浙江",
"children":
[
{"name": "杭州"},
{"name": "宁波"},
{"name": "温州"},
{"name": "绍兴"}
]
},
{
"name": "广西",
"children":
[
{
"name": "桂林",
"children":
[