jjzjj

javascript - D3.js 在径向树中添加元素之间的链接(分层边缘捆绑元素)

coder 2024-07-16 原文

几个月前，我尝试了 combining Hierarchical Edge Bundling and Radial Reingold–Tilford Tree using d3.js

我从HEB开始，试图把它做成一棵树。 事情并没有按照我想要的方式发展，我意识到从可折叠的放射状树开始(不是 Reingold Tilford)可能会更好， Angular 不同。

Here is a JSFiddle of the radial tree

数据模型也发生了变化，因为元素现在有了名称、子元素和导入(链接)。

var flare =
{
    "name": "root",
    "children": [
        {
            "name": "test1.parent1","children": [
                {"name": "test1.child11","children": [
                    {"name": "test1.child111"},
                    {"name": "test1.child112"}
                ]}
            ],"imports": ["test2.parent2","test3.parent3","test4.parent4"]
        },
        {
            "name": "test2.parent2","children": [
                {"name": "test2.child21"},
                {"name": "test2.child22"},
                {"name": "test2.child28","children":[
                    {"name": "test2.child281"},
                    {"name": "test2.child282"}
                ]}
            ],"imports": ["test3.parent3"]
        },
        {"name": "test3.parent3","imports": ["test4.parent4"]},
        {
            "name": "test4.parent4","children": [
                {"name": "test4.child41"},
                {"name": "test4.child42"}
            ]
        }
    ]
};

要慢慢开始，我想结合non-interactive Hierarchical edge bundling来自 Mike Bostock 与当前 JSFiddle ，但请记住，互动将在稍后成为其中的一部分。

此外，只有第一层必须有链接(父-父链接)，如下所示(我想要的结果):

我目前最大的问题是 HEB 没有“根”，但树从单个元素开始。所以到目前为止，我所做的一切都导致树的中心一团糟。

请注意，树的中心有一个圆圈，用于覆盖根到 1 级的链接，因此树从 1 级(父级)开始。

var circle = svg.append("circle")
  .attr("cx", 0)
  .attr("cy", 0)
  .attr("r", diameter - 725.3)
  .style("fill", "#F3F5F6")
  .style("stroke-width", 0.2)
  .style("stroke", "black");

理想情况下，父级之间的链接必须在关卡折叠(未)折叠时更新，就像节点和关卡之间的链接一样，但这可以稍后进行，并且在最初获得第一级后可能并不那么困难显示的链接。此外，数据模板可能会根据需要更改，但所有 3 条信息都很重要(名称、 child 和导入)。

另一种方法是能够将数据更改为不包括根部分，并且它的行为与现在完全一样 也欢迎部分回答。

最佳答案

My current biggest issue is that the HEB has no "root", but the tree starts with a single item. So everything I have tried so far has led to a big mess at the center of the tree.

既然你有一个根，为什么不把它设置为中心“节点”并使它成为一个径向树，比如 this ？ Here是另一个例子，但有多个根。

也就是说，您没有要求径向树，即使这听起来可以回答您的问题。如果你决心把东西排列成不同镭的圆圈，也许要解决的问题就是那些看起来如此“凌乱”的线条纵横交错。如果是这种情况，那么不同的排序算法可能会起作用。 Here是一篇扩展了在 D3.js 的类似场景中使用不同排序算法的文章。 D3布局算法也是open source online .

我能为您找到的最佳资源是 this Stack Mathematics Answer .其中有几点对我来说特别突出:

  1. 您的连接/分支可能一团糟，但如果它是交互式的，并且当您将鼠标悬停在特定节点上时进出特定节点的分支会亮起，那么它仍然可以是一个可读/可用的图形。
  2. 您可以尝试不同的排序算法，直到找到适合您的数据的算法。
  3. 圆圈内可以有一个或多个节点，在这种情况下，将根节点放在中间可能很有意义。

这不是一个实际可用的答案，因为它在 Mathematica 中，但我认为它对基础理论和技术的解释很有用。

如果您不想将树的根放在中央，可能更艺术化的方法是使从父级到根父级的所有分支都是半透明的，并且可能是不同的颜色。

希望这对您有所帮助!

关于javascript - D3.js 在径向树中添加元素之间的链接(分层边缘捆绑元素)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40263161/

径向捆绑34noreferrernoopenerjavascriptcssjsond3.jstree

有关javascript - D3.js 在径向树中添加元素之间的链接(分层边缘捆绑元素)的更多相关文章

  1. ruby-on-rails - Rails 应用程序之间的通信 - 2

    我构建了两个需要相互通信和发送文件的Rails应用程序。例如，一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情，所以我什至不知道从哪里开始。任何帮助，将不胜感激。谢谢! 最佳答案 无论Rails是什么，几乎所有Web应用程序都有您的要求，大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去，网站不应直接访问彼此

  2. ruby - ＃之间？ Cooper 的 *Beginning Ruby* 中的错误或异常 - 2

    在Cooper的书BeginningRuby中，第166页有一个我无法重现的示例。classSongincludeComparableattr_accessor:lengthdef(other)@lengthother.lengthenddefinitialize(song_name,length)@song_name=song_name@length=lengthendenda=Song.new('Rockaroundtheclock',143)b=Song.new('BohemianRhapsody',544)c=Song.new('MinuteWaltz',60)a.betwee

  3. ruby-on-rails - `a ||= b` 和 `a = b if a.nil 之间的区别？ - 2

    我正在检查一个Rails项目。在ERubyHTML模板页面上，我看到了这样几行:我不明白为什么不这样写:在这种情况下，||=和ifnil?有什么区别？ 最佳答案 在这种特殊情况下没有区别，但可能是出于习惯。每当我看到nil?被使用时，它几乎总是使用不当。在Ruby中，很少有东西在逻辑上是假的，只有文字false和nil是。这意味着像if(!x.nil?)这样的代码几乎总是更好地表示为if(x)除非期望x可能是文字false。我会将其切换为||=false，因为它具有相同的结果，但这在很大程度上取决于偏好。唯一的缺点是赋值会在每次运行

  4. ruby - 在哈希的键数组中追加元素 - 2

    查看我的Ruby代码:h=Hash.new([])h[0]=:word1h[1]=h[1]输出是:Hash={0=>:word1,1=>[:word2,:word3],2=>[:word2,:word3]}我希望有Hash={0=>:word1,1=>[:word2],2=>[:word3]}为什么要附加第二个哈希元素(数组)？如何将新数组元素附加到第三个哈希元素？ 最佳答案 如果您提供单个值作为Hash.new的参数(例如Hash.new([])，完全相同的对象将用作每个缺失键的默认值。这就是您所拥有的，那是你不想要的。您可以改用

  5. 「Python｜Selenium｜场景案例」如何定位iframe中的元素？ - 2

    本文主要介绍在使用Selenium进行自动化测试或者任务时，对于使用了iframe的页面，如何定位iframe中的元素文章目录场景描述解决方案具体代码场景描述当我们在使用Selenium进行自动化测试的时候，可能会遇到一些界面或者窗体是使用HTML的iframe标签进行承载的。对于iframe中的标签，如果直接查找是无法找到的，会抛出没有找到元素的异常。比如近在咫尺的例子就是，CSDN的登录窗体就是使用的iframe，大家可以尝试通过F12开发者模式查看到的tag_name,class_name,id或者xpath来定位中的页面元素，会抛出NoSuchElementException异常。解决

  6. [工业相机] 分辨率、精度和公差之间的关系 - 2

    📢博客主页：https://blog.csdn.net/weixin_43197380📢欢迎点赞👍收藏⭐留言📝如有错误敬请指正！📢本文由Loewen丶原创，首发于CSDN，转载注明出处🙉📢现在的付出，都会是一种沉淀，只为让你成为更好的人✨文章预览：一.分辨率（Resolution）1、工业相机的分辨率是如何定义的？2、工业相机的分辨率是如何选择的？二.精度（Accuracy）1、像素精度（PixelAccuracy）2、定位精度和重复定位精度（RepeatPrecision）三.公差（Tolerance）四.课后作业（Post-ClassExercises）视觉行业的初学者，甚至是做了1~2年

  7. ruby - Hanami link_to 助手只呈现最后一个元素 - 2

    我是HanamiWorld的新人。我已经写了这段代码:moduleWeb::Views::HomeclassIndexincludeWeb::ViewincludeHanami::Helpers::HtmlHelperdeftitlehtml.headerdoh1'Testsearchengine',id:'title'hrdiv(id:'test')dolink_to('Home',"/",class:'mnu_orizontal')link_to('About',"/",class:'mnu_orizontal')endendendendend我在模板上调用了title方法。htm

  8. ruby - 将n维数组的每个元素乘以Ruby中的数字 - 2

    在Ruby中，是否有一种简单的方法可以将n维数组中的每个元素乘以一个数字？这样:[1,2,3,4,5].multiplied_by2==[2,4,6,8,10]和[[1,2,3],[1,2,3]].multiplied_by2==[[2,4,6],[2,4,6]]？(很明显，我编写了multiplied_by函数以区别于*，它似乎连接了数组的多个副本，不幸的是这不是我需要的)。谢谢! 最佳答案 它的长格式等价物是:[1,2,3,4,5].collect{|n|n*2}其实并没有那么复杂。你总是可以使你的multiply_by方法:c

  9. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  10. ruby - 无法理解 `puts{}.class` 和 `puts({}.class)` 之间的区别 - 2

    由于匿名block和散列block看起来大致相同。我正在玩它。我做了一些严肃的观察，如下所示:{}.class#=>Hash好的，这很酷。空block被视为Hash。print{}.class#=>NilClassputs{}.class#=>NilClass为什么上面的代码和NilClass一样，下面的代码又显示了Hash？puts({}.class)#Hash#=>nilprint({}.class)#Hash=>nil谁能帮我理解上面发生了什么？我完全不同意@Lindydancer的观点你如何解释下面几行:print{}.class#NilClassprint[].class#A

随机推荐