的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：使無形的節點採取任何空間

回答

相關問題