D3.js的V5版本-Vue框架中使用-树状图

JavaScript023

D3.js的V5版本-Vue框架中使用-树状图,第1张

一. api简介

d3.tree()，创建一个树状图生成器

d3.tree().size()，定义树的大小

d3.hierarchy()，层级布局，需要和tree生成器一起使用，来得到绘制树所需要的节点数据和边数据

node.descendants()得到所有的节点，已经经过转换的数据

node.links()，得到所有的边，已经经过转换的数据

二.Vue中使用

*点击节点可展开收缩

function getMenuIds(){ //取得所有选中的节点，返回节点对象的集合 var ids=""var nodes=$("#JsTree").jstree("get_checked")//使用get_checked方法 $.each(nodes, function(i, n) { ids += $(n).attr("id")+","})alert(ids)}