d3.js结合层次边缘捆绑和径向Reingold-Tilford树+数据

本文介绍了d3.js结合层次边缘捆绑和径向Reingold-Tilford树+数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我想（类似）结合 *孩子 我设置了这个小提琴，显示HEB中的简单数据： https://fiddle.jshell.net/d1766z4r/2/ 我已经合并了两种类型的数据（在开始的评论中，将替换当前变量类）： var classes = [ {name：test.cluster1.item1，children：[ {name：test.cluster1.item4，imports：[ test.cluster1.item2，test.cluster1.item3]}， {name：test.cluster1.item5} ]}， {name： test.cluster1.item2，imports：[test.cluster1.item3]}， {name：test.cluster1.item3} ]; 如果有更好的方法来组合数据，请随意更改。 > 除了更改数据，我不知道如何继续，因为我是一个d3.js和javascript新手，尤其是当它会链接到正确的子项4），但不是其他（项目5）。但是，我会考虑一个答案，将显示一个链接到项目1的所有孩子，作为开始开发这个项目的方法。 请更新这个小提琴或做一个新的一个来备份你的代码，如果可能的话。 当然欢迎任何关于如何进行的建议。 下一步是让这些孩子点击显示或隐藏，使用类似于可折叠树（随时为此提供建议，但它可能是一个新的问题，如果我不能找到如何做到这一点），因为我将与大量的数据工作，首先为儿童辩护。 最后，每个孩子都可以有自己的孩子，但1行孩子现在就足够了。 更新：答案不必是完整的解决方案，每一点（看我在那里做了什么？）帮助！ 解决方案我可能完全偏离了您的要求，请澄清是否是这种情况。 TL; DR ：此处是如何看起来，基于我从问题解释。已添加了一些测试数据。 分层边缘捆绑，提供了一种在图形中可视化非分层边缘的方法。这是链接在d3中实施的论文，如果您未找到。 在示例只有叶节点通过过滤其他节点显示： node = node .data（nodes.filter函数（n）{return！n.children;}）） .enter（）。append（text） .attr（class，node）... 示例中的层次关系由名称中的点表示，因此cluster1是item1，item2和item3的父代。 这里是我们删除过滤器，而追加节点时的外观。 现在，我对你的问题的解释是你想使用层次化边缘绑定来可视化非层次关系（在示例中由导入表示）和'Radial Reingold 这是可以做到的： 格式需要不更改为您的建议。以下应该可以： var classes = [ {name：test.cluster1 .item1.item4，imports：[test.cluster1.item2，test.cluster1.item3] }， {name test.cluster1.item1.item5，imports：[] } ] 使用packageImports函数从节点获取层次结构边： nodes.forEach d）{ if（d.children& d.name！==）d.children.forEach（function（i）{ imports.push（{ source ：map [d.name]， target：i }）; }）; }）; 添加 Radial Reingold-Tilford示例： var diagonal = d3.svg .diagonal.radial（） .projection（ function（d）{ debugger; return [dy，dx / 180 * Math.PI]; } ）; 附加分层边缘路径： treeLink = treeLink .data（getHeirarchialEdges（nodes）） .enter（）。append（path） .attr（class tree-link） .attr（d，diagonal）; 我还添加了mouseover和mouseout函数来突出显示层级节点，节点。 I would like to (sort of) combine the Hierarchical Edge Bundling and the Radial Reingold–Tilford TreeIt would look a little like this (pardon my horrible paint.net skills)*:*the children are supposed to be in an arc, like in the Tree.I have setup this fiddle that shows simple data in HEB: https://fiddle.jshell.net/d1766z4r/2/I have already combined the two types of data (in comments at the begining, that will replace the current variable "classes"):var classes = [{"name":"test.cluster1.item1","children": [ {"name": "test.cluster1.item4","imports":["test.cluster1.item2","test.cluster1.item3"]}, {"name": "test.cluster1.item5"} ]},{"name":"test.cluster1.item2","imports":["test.cluster1.item3"]},{"name":"test.cluster1.item3"}];If there is a better way to combine the data, feel free to change it accordingly.Other than changing the data, I am not sure how to proceed, as I am a d3.js and javascript novice, especially when it'll come to linking the right subitem (item 4), but not the other (item 5). However, I will consider an answer that will show a link to all the children of item 1 as a way to start developing this.Please update this fiddle or make a new one to back your code up if possible.Any advice on how to proceed is welcomed of course.The next step will be to make those children show or hide on click, using a method similar to the Collapsible Tree (feel free to give advice on that aswell, but it will probably be a new question later if I can't find out how to do it), as I will have to work with big amounts of data, justifying children in the first place.Finally, every child could have children of its own, but 1 line of children will suffice for now. I'll get to that later I suppose.UPDATE: The answers don't have to be complete solutions, every bit (see what I did there?) helps! 解决方案 I might be completely off track to what you are asking, please clarify if this is the case.TL;DR: Here is how it looks, based on what I interpreted from the question. Have added some more data for testing.Hierarchical Edge Bundling, provides a way of visualizing non-hierarchical edges in the graph. Here is the link to the paper which is implemented in d3, if you have not found.In the example only leaf nodes are shown by filtering the other nodes:node = node .data(nodes.filter(function(n) { return !n.children; })) .enter().append("text") .attr("class", "node")...Hierarchical relations in the example are represented by dots in names, so cluster1 is the parent of item1, item2 and item3.Here is how it look if we remove the filter while appending nodes.Now, my interpretation of your question is you want to use Hierarchical Edge Bundling for visualizing the non-hierarchical relations (represented by imports in the example) and 'Radial Reingold–Tilford' for hierarchical relations.Here is how this can be done:Data format need not change to what you have proposed. Below should be okay: var classes = [ { "name": "test.cluster1.item1.item4", "imports": ["test.cluster1.item2", "test.cluster1.item3"] }, { "name": "test.cluster1.item1.item5", "imports": [] }]Adopt packageImports function to get hierarchical edges from the nodes:nodes.forEach(function (d) { if(d.children && d.name !== "") d.children.forEach(function (i) { imports.push({ source: map[d.name], target: i }); }); });Add the radial diagonal generator from Radial Reingold–Tilford example : var diagonal = d3.svg.diagonal.radial() .projection( function(d) { debugger; return [d.y, d.x / 180 * Math.PI]; } );Append hierarchical edges path:treeLink = treeLink .data(getHeirarchialEdges(nodes)) .enter().append("path") .attr("class", "tree-link") .attr("d", diagonal);I have also added to the mouseover and mouseout functions to highlight the hierarchical nodes, try hovering over any parent node. 这篇关于d3.js结合层次边缘捆绑和径向Reingold-Tilford树+数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！