【问题标题】:Draw path to join two nodes without intersect other node + d3.js绘制路径以连接两个节点而不与其他节点相交+ d3.js
【发布时间】:2014-03-05 18:53:10
【问题描述】:

我正在使用 d3-flow-tree (here) 将我的树节点显示为流布局。并添加其他 g 元素来表示两个节点之间的连接(通过使用 flow 布局管理其他图表)。

当绘制从一个节点到另一个节点的链接时,它必须是不与其他节点相交的矩形路径,如附加图像

需要找到可能的可用路径。欢迎任何建议和想法。

提前致谢

【问题讨论】:

  • 您能否详细说明您计划如何实现这一点:您的绘图看起来不像您链接到的可折叠树布局。
  • 在树中有一个根我隐藏根并从根的孩子开始,所以这一切都是根的孩子并且它们在流动......我没有显示内部节点它们是可折叠的
  • 但在您链接到的布局中,根的所有子项都将显示在单独的行上。您的 N:1 到 N:6 兄弟元素(根节点的子节点)还是其中一些是彼此的子节点?
  • N:1 N:2 .. 是根节点的子节点...它们也有兄弟节点,但在示例图表中的行为类似于堆栈,此视图仅适用于根节点的子节点和链接是根节点的两个子节点之间的连接
  • 好吧,如果我尝试这样做,我不会担心尝试在孩子之间弯曲链接,因为这会混淆树布局。我总是沿着图表的边缘向左走。然后,您必须对节点布局进行的唯一更改是使左边距更大。不管你是否这样做,你为什么不把你的流程图的工作示例和链接放在一起,然后回来用它编辑你的问题。这样人们就可以就如何解决任何遗留问题提出更具体的建议。

标签: javascript d3.js data-visualization


【解决方案1】:

看起来 WebCola 可以做到这一点。你可以看看他们的演示:https://ialab.it.monash.edu/webcola/examples/unix.html

那里作者提到:“这个例子的另一个特点是最短路径边缘路由。即在布局停止后,边缘路径被路由以避免通过节点边界。”他还解释了它是如何实现的。

【讨论】:

猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2022-01-21
  • 2017-06-13
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多