的Graphviz：使无形的节点采取任何空间

考虑图的Graphviz：使无形的节点采取任何空间

digraph "Graph b9ca21a1-971e-400c-a7f4-cd650986476a" { 
    graph [ margin=10 ]; 
    node [ shape=point ]; 

    "Invisible" [ 
     //height=0, 
     //width=0, 
     //margin=0, 
     //style=invis, 
     color="red" 
     ]; 

    subgraph "cluster_1" { 
     "A"; 
     "B"; 
     "Invisible"; 
     "C"; 
     "D"; 
    } 

}

导致

我要红色的节点是完全看不见的，占用任何空间，但它有留在那里，这样它可以用于lhead/ltail其他这样的杂项东西。

当注释行取消注释，结果是

正如你看到的，仍然是此节点的空间神器。

问题：有没有一种方法可以完全删除它，而不会影响图中其他节点的布局？

来源

2017-09-12 Chiel ten Brinke

您可以使用nodesep最小化节点分离（最小值为0.02），而是将不可见的peripheries添加到可见节点，以便实现它们的近似相等的分离。

这里有一个如何改变你的第一张图的近似进入第二近似的例子：

<!DOCTYPE html> 
 
<meta charset="utf-8"> 
 
<body> 
 
<script src="//d3js.org/d3.v4.min.js"></script> 
 
<script src="https://unpkg.com/[email protected]/viz.js"></script> 
 
<script src="https://unpkg.com/[email protected]/build/d3-graphviz.min.js"></script> 
 
<div id="graph" style="text-align: center;"></div> 
 
<script> 
 

 
var dots = [ 
 
    ` 
 
digraph "Graph b9ca21a1-971e-400c-a7f4-cd650986476a" { 
 
    graph [ margin=10, nodesep=0 ]; 
 
    node [ shape=point, peripheries=3, penwidth=0 ]; 
 

 
    "Invisible" [ 
 
     //height=0, 
 
     //width=0, 
 
     //margin=0, 
 
     //style=invis, 
 
     color="red" 
 
     ]; 
 

 
    subgraph "cluster_1" { 
 
     "A"; 
 
     "B"; 
 
     "Invisible"; 
 
     "C"; 
 
     "D"; 
 
    } 
 

 
    "X" [color="blue"]; 
 
    "X" -> "Invisible" [headclip="false"] 
 
} 
 
    `, ` 
 
digraph "Graph b9ca21a1-971e-400c-a7f4-cd650986476a" { 
 
    graph [ margin=10, nodesep=0 ]; 
 
    node [ shape=point, peripheries=3, penwidth=0 ]; 
 

 
    "Invisible" [ 
 
     peripheries=0, 
 
     height=0, 
 
     width=0, 
 
//  margin=0, 
 
//  style=invis, 
 
     color="red" 
 
     ]; 
 

 
    subgraph "cluster_1" { 
 
     "A"; 
 
     "B"; 
 
     "Invisible"; 
 
     "C"; 
 
     "D"; 
 
    } 
 

 
    "X" [color="blue"]; 
 
    "X" -> "Invisible" [headclip="false"] 
 
} 
 
    ` 
 
]; 
 

 
var dotIndex = 0; 
 
var graphviz = d3.select("#graph").graphviz(); 
 

 
function render() { 
 
    var dot = dots[dotIndex % dots.length]; 
 
    var transition1 = d3.transition() 
 
     .delay(1000) 
 
     .duration(1000 + 4000 * dotIndex); 
 
    graphviz 
 
     .tweenShapes(false) 
 
     .engine("dot") 
 
     .dot(dot) 
 
     .transition(transition1) 
 
     .render(); 
 
    dotIndex += 1; 
 

 
    transition1 
 
     .transition() 
 
     .duration(0) 
 
     .on('end', function() { 
 
      if (dotIndex != dots.length) { 
 
       render(); 
 
      } 
 
     }); 
 
} 
 

 
render(); 
 

 
</script>

来源

2017-09-12 17:05:14 magjac

这种方法的缺点是，任何边缘将只到作为最外围的外围，看起来很丑。 –

顺便说一句，你的片段给我一个错误。 –

什么是错误消息和哪个浏览器版本是你@使用？ – magjac

的Graphviz：使无形的节点采取任何空间

回答

相关问题