如何解决建立可以使用d3折叠/展开的树节点
因此,前几天我使该树可视化工作了,现在我打算在此基础上构建并向其添加折叠节点。我的代码基于以下项目:(向Curran拍摄,精彩视频)https://vizhub.com/curran/4f92c793909f48d28012e43ddab716df?edit=files
这是当前的代码:
传递给initFileTree()的“ item”包含json格式的数据,与提供的链接完全相同。
initFileTree(item) {
const svg = select('svg');
svg.selectAll('*').remove();
const width = document.body.clientWidth;
const height = document.body.clientHeight;
const margin = { top: 0,right: 0,bottom: 0,left: 0};
const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;
const treeLayout = tree().nodeSize([innerHeight/50,innerWidth]);
const g = svg
.attr('width',width)
.attr('height',height)
.append('g')
.attr('transform',`translate(${margin.left},${margin.top})`);
svg.call(zoom().on('zoom',() => {
g.attr('transform',event.transform);
}));
const root = hierarchy(item);
const links = treeLayout(root).links();
const linkPathGenerator = linkHorizontal()
.x(d => d.y)
.y(d => d.x);
g.selectAll('path')
.data(links).enter()
.append('path')
.attr('d',linkPathGenerator);
g.selectAll('text').data(root.descendants())
.enter().append('text')
.attr('x',d => d.y)
.attr('y',d=> d.x)
.attr('dy','0.32em')
.attr('text-anchor',d => d.children ? 'middle' : 'start' )
.attr('font-size',d => 1.5 - d.data.depth + 'em')
.text(d => d.data.data.id);
}
所以对于我的问题,d3中是否有任何内置函数可以集成到此代码中以使节点折叠/展开?还是需要对该函数进行大量重写?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。