D3.js在做树状图是如何实现文字换行

JavaScript06

D3.js在做树状图是如何实现文字换行,第1张

直接输出html的就能换行了,在html页面展示只能用html的换行。today.getYear()+1900:today.getYear())+"年"+(today.getMonth()+1)+"月"+today.getDate()+"日"后面添加就行了。

一. api简介

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

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

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

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

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

二.Vue中使用

*点击节点可展开收缩

做管理后台遇到了一个需求,是要再table里显示路径的名字

如上图所示,但是后端的哥们只返回了每一级的name ,并没有路径。前端能解决的事情就不麻烦后端了,只能用递归解决了:

一、获取每一级中的路径 path

如下图可以看到 pathName 就是把路径拼接起来了,该方法同样适用于树状结构添加任意属性字段。

还有其他几种树状结构常用的递归操作 可以参考该博主文章

https://blog.csdn.net/m0_38134431/article/details/108453055