javascript - 使用 D3 的节点和集群以及集群到集群的链接

标签 javascript layout d3.js grouping graphviz

当程序的输入为时,如何使用树/包/簇/簇力布局使用 D3 将元素自动定位到网格中

graph G {
  e
  subgraph clusterA {
    a -- b;
    subgraph clusterC {
      C -- D;
    }
  }
  subgraph clusterB {
    d -- f
  }
  d -- D
  e -- clusterB
  clusterC -- clusterB
}

预期的最终结果(使用 D3)可以在 -> http://graphviz-dev.appspot.com 处查看。但与节点-节点、节点-集群和集群-集群有正确的连接,如本示例 http://www.graphviz.org/content/fdpclust 所示

最佳答案

如果我理解得很好,你想将边缘从一个簇绘制到另一个簇。执行此操作的方法是在图形的开头添加compound=true声明,并在要链接在一起的集群的两个节点之间绘制边,将集群精确为头和使用 lheadltail 确定边缘的尾部。

你的代码应该是这样的:

graph G
{
    compound=true;
    e
    subgraph clusterA
    {
        a -- b;
        subgraph clusterC
        {
            C -- D;
        }
    }
    subgraph clusterB
    {
        d -- f
    }
    d -- D
    e -- d [lhead=clusterB]
    C -- d [ltail=clusterC, lhead=clusterB]
}

如果需要,您可以在这篇文章中获得更多信息:GraphViz - How to connect subgraphs?

关于javascript - 使用 D3 的节点和集群以及集群到集群的链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17638203/

相关文章:

javascript - d3.js:使用新数据集刷新图表

javascript - dc js - 创建多列维度

javascript - 在 dc.js 中放大文本标签

javascript - Jquery Scroll to Element 不会为我的滚动设置动画

javascript - 显示一位数百分比,跳过固定数字vue

php - 如何在从 php 回显页面接收到的 .post() 输出数据中运行 javascript 函数

Css float 调整布局

javascript - 更改所选选项后提交下拉表单

image - 页面上多个图像的智能对齐/布局

html - 如何使用 CSS 网格制作侧边栏和部分?