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

JavaScript016

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

一. api简介

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

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

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

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

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

二.Vue中使用

*点击节点可展开收缩

思路就是：找出父节点的所有子节点的checked的属性设置成与父节点一致即可

我是利用jquery实现，看看是否符合你的要求

<script src="../lib/jquery.js" type="text/javascript"></script>

<script src="../jquery.treeview.js" type="text/javascript"></script>

<script type="text/javascript">

$(function(){

$("#tree").treeview()

$("input[name='ids']").click(function(){

var checkedValue = this.checked

$(this).parent("li").find("input[name='ids']").attr("checked",checkedValue)

})

})

</script>

<ul id='tree'>

<li>

<input type='checkbox' name='ids' id="test"/>

<span class='folder'>test1</span>

<ul>

<li>

<input type='checkbox' name='ids' />

<span class='folder'>test11</span>

</li>

</ul>

<ul>

<li>

<input type='checkbox' name='ids' />

<span class='folder'>test12</span>

<ul>

<li>

<input type='checkbox' name='ids' />

<span class='folder'>test121</span>

</li>

</ul>

</li>

</ul>

</li>

</ul>

jstree默认打开有两种方式，一种在生成树结构时在有子节点的li中加class="jstree-open"还有一种是树形载入完成后用jstree的所有节点open_all事件所有节点跳转是要在生成时在li中加XXX或在载入完后再用js加载