カスタマイズされた形状のノードを生成するには？

Question

HEREは、graphvizを使用して複雑なグラフを生成する方法を示す非常に良い例です。 ドットファイルがここにリストされています。

digraph G { 
    compound=true; 
    ranksep=1.25; 
    label="From Past to Future..."; 

    node [shape=plaintext, fontsize=16]; 

    bgcolor=white; 
    edge [arrowsize=1, color=black]; 

    /* Nodes */ 
    subgraph cluster_Computers {label="Computers"; labelloc="b"; Computers_icon}; 
    Computers_icon [label="", shape=box, style=invis, shapefile="Computers.png"]; 

    subgraph cluster_Semantic_Web {label="Semantic Web"; labelloc="b"; Semantic_Web_icon}; 
    Semantic_Web_icon [label="", shape=box, style=invis, shapefile="Semantic_Web.png"]; 

    subgraph cluster_Cryptography {label="Cryptography"; labelloc="b"; Cryptography_icon}; 
    Cryptography_icon [label="", shape=box, style=invis, shapefile="Cryptography.png"]; 

    subgraph cluster_Automata {label="Automata"; labelloc="b"; Automata_icon}; 
    Automata_icon [label="", shape=box, style=invis, shapefile="Automata.png"]; 

    subgraph cluster_AI {label="A.I."; labelloc="b"; AI_icon}; 
    AI_icon [label="", shape=box, style=invis, shapefile="AI.png"]; 

    subgraph cluster_Chaos {label="Chaos/Fractals"; labelloc="b"; Chaos_icon}; 
    Chaos_icon [label="", shape=box, style=invis, shapefile="Chaos.png"]; 

    subgraph cluster_XML {label="XML/RDF/URI"; labelloc="b"; XML_icon}; 
    XML_icon [label="", shape=box, style=invis, shapefile="XML.png"]; 

    subgraph cluster_Ontology {label="Ontology/Clustering"; labelloc="b"; Ontology_icon}; 
    Ontology_icon [label="", shape=box, style=invis, shapefile="Ontology.png"]; 

    subgraph cluster_Biology {label="Biology/Neurons"; labelloc="b"; Biology_icon}; 
    Biology_icon [label="", shape=box, style=invis, shapefile="Biology.png"]; 

    subgraph cluster_Agents {label="Agents/Security"; labelloc="b"; Agents_icon}; 
    Agents_icon [label="", shape=box, style=invis, shapefile="Agents.png"]; 

    subgraph cluster_Small_World {label="The Small World Project"; labelloc="b"; Small_World_icon}; 
    Small_World_icon [label="", shape=box, style=invis, shapefile="Small_World.png"]; 

    subgraph cluster_Social_Networks {label="Social Networks"; labelloc="b"; Social_Networks_icon}; 
    Social_Networks_icon [label="", shape=box, style=invis, shapefile="Social_Networks.png"]; 

    subgraph cluster_Search_Engines {label="Search Engines"; labelloc="b"; Search_Engines_icon}; 
    Search_Engines_icon [label="", shape=box, style=invis, shapefile="Search_Engines.png"]; 

    subgraph cluster_Turing {label="A. Turing"; labelloc="b"; Turing_icon}; 
    Turing_icon [label="", shape=box, style=invis, shapefile="Turing.png"]; 

    subgraph cluster_Rejewski {label="M. Rejewski"; labelloc="b"; Rejewski_icon}; 
    Rejewski_icon [label="", shape=box, style=invis, shapefile="Rejewski.png"]; 

    subgraph cluster_Dertouzos {label="M. Dertouzos"; labelloc="b"; Dertouzos_icon}; 
    Dertouzos_icon [label="", shape=box, style=invis, shapefile="Dertouzos.png"]; 

    subgraph cluster_Berners_Lee {label="T. Berners-Lee"; labelloc="b"; Berners_Lee_icon}; 
    Berners_Lee_icon [label="", shape=box, style=invis, shapefile="Berners_Lee.png"]; 

    /* Relationships */ 
    Computers_icon -> Semantic_Web_icon; 
    Semantic_Web_icon -> Computers_icon; 
    Cryptography_icon -> Semantic_Web_icon; 
    Cryptography_icon -> Computers_icon; 
    Automata_icon -> Computers_icon; 
    AI_icon -> Automata_icon; 
    Automata_icon -> AI_icon; 
    Chaos_icon -> Computers_icon; 
    Chaos_icon -> AI_icon; 
    AI_icon -> Chaos_icon; 
    Computers_icon -> Chaos_icon; 
    XML_icon -> Semantic_Web_icon; 
    XML_icon -> Computers_icon; 
    Computers_icon -> XML_icon; 
    Ontology_icon -> Semantic_Web_icon; 
    Biology_icon -> AI_icon; 
    Biology_icon -> Chaos_icon; 
    Chaos_icon -> Biology_icon; 
    Chaos_icon -> Semantic_Web_icon; 
    Agents_icon -> Semantic_Web_icon; 
    Semantic_Web_icon -> Agents_icon; 
    Agents_icon -> AI_icon; 
    AI_icon -> Agents_icon; 
    Small_World_icon -> Chaos_icon; 
    Small_World_icon -> Agents_icon; 
    Small_World_icon -> Biology_icon; 
    Biology_icon -> Small_World_icon; 
    Social_Networks_icon -> Small_World_icon; 
    Social_Networks_icon -> Biology_icon; 
    Search_Engines_icon -> Semantic_Web_icon; 
    Computers_icon -> Search_Engines_icon; 
    Turing_icon -> Cryptography_icon; 
    Turing_icon -> Computers_icon; 
    Turing_icon -> Automata_icon; 
    Rejewski_icon -> Turing_icon; 
    Rejewski_icon -> Cryptography_icon; 
    Dertouzos_icon -> Computers_icon; 
    Dertouzos_icon -> Berners_Lee_icon; 
    Berners_Lee_icon -> Semantic_Web_icon; 


    { rank=same; Rejewski_icon; Turing_icon; Dertouzos_icon; Berners_Lee_icon }; 
    { rank=same; Biology_icon; AI_icon; Social_Networks_icon }; 

} 

私は、ドットファイルを変更しようとしたが、元のポストと同じPNG画像を得ることができませんでした警告

C:\dot>dot -Tpng -ofrom-past-to-future.png from-past-to-future.dot 
Warning: AI_icon was already in a rankset, deleted from cluster G 
Warning: Biology_icon was already in a rankset, deleted from cluster G 
Warning: Social_Networks_icon was already in a rankset, deleted from cluster G 
Warning: Turing_icon was already in a rankset, deleted from cluster G 
Warning: Rejewski_icon was already in a rankset, deleted from cluster G 
Warning: Dertouzos_icon was already in a rankset, deleted from cluster G 
Warning: Berners_Lee_icon was already in a rankset, deleted from cluster G 

とdot -Tpng -ofrom-past-to-future.png from-past-to-future.dotを実行します。 これにアプローチする方法は？

Answer 1

ここには、現在のバージョンのgraphvizで動作する修正されたスクリプトがあります。すべての画像をスクリプトと同じディレクトリに置く必要があることに注意してください。

変更は、私が作っ：

• クリーンアップ冗長属性宣言（label=""、labelloc、など）
• ではなく、ノード
から shape=boxと style=invisを削除し、古い shapefile
• のimage属性を使用します
• penwidth=0を追加して、クラスタの境界を取り除きます。
• グラフのラベルを下に置く（常に下にする）
• ランク制約がコメントアウトされている。 sameノードを異なるサブグラフの一部にすることはできません。

これはもちろん、全く同じグラフを再現しません。ランク制約を再作成するには、主に各ノードがラベルを付けるために独自のクラスタにパックされているため、いくつかの創造性が必要です...非常にハッキーです。クラスターなしでも、新しいxlabel属性を使用して同じことを試すことができます。

私はrank=sameサブグラフのコメントを外し、それらをクラスタの定義の前に置いた第2のバージョンを追加しました。 Graphvizは出力を作成しますが、これらのノードのラベルは作成されません。

ここではスクリプトです：

digraph G { 
    compound=true; 
    ranksep=1.25; 

    node [shape=plaintext, fontsize=16, label=""]; 

    bgcolor=white; 
    edge [arrowsize=1, color=black]; 
    graph[penwidth=0, labelloc="b"]; 

    /* Nodes */ 
    //{ rank=same; Rejewski_icon; Turing_icon; Dertouzos_icon; Berners_Lee_icon }; 
    //{ rank=same; Biology_icon; AI_icon; Social_Networks_icon }; 

    subgraph cluster_Computers {label="Computers"; Computers_icon[image="Computers.png"];}; 
    subgraph cluster_Semantic_Web {label="Semantic Web"; Semantic_Web_icon[image="Semantic_Web.png"];}; 
    subgraph cluster_Cryptography {label="Cryptography"; Cryptography_icon[image="Cryptography.png"];}; 
    subgraph cluster_Automata {label="Automata"; Automata_icon[image="Automata.png"];}; 
    subgraph cluster_AI {label="A.I."; AI_icon[image="AI.png"];}; 
    subgraph cluster_Chaos {label="Chaos/Fractals"; Chaos_icon[image="Chaos.png"];}; 
    subgraph cluster_XML {label="XML/RDF/URI"; XML_icon[image="XML.png"];}; 
    subgraph cluster_Ontology {label="Ontology/Clustering"; Ontology_icon[image="Ontology.png"];}; 
    subgraph cluster_Biology {label="Biology/Neurons"; Biology_icon[image="Biology.png"];}; 
    subgraph cluster_Agents {label="Agents/Security"; Agents_icon[image="Agents.png"];}; 
    subgraph cluster_Small_World {label="The Small World Project"; Small_World_icon[image="Small_World.png"];}; 
    subgraph cluster_Social_Networks {label="Social Networks"; Social_Networks_icon[image="Social_Networks.png"];}; 
    subgraph cluster_Search_Engines {label="Search Engines"; Search_Engines_icon[image="Search_Engines.png"];}; 
    subgraph cluster_Turing {label="A. Turing"; Turing_icon[image="Turing.png"];}; 
    subgraph cluster_Rejewski {label="M. Rejewski"; Rejewski_icon[image="Rejewski.png"];}; 
    subgraph cluster_Dertouzos {label="M. Dertouzos"; Dertouzos_icon[image="Dertouzos.png"];}; 
    subgraph cluster_Berners_Lee {label="T. Berners-Lee"; Berners_Lee_icon[image="Berners_Lee.png"];}; 


    /* Relationships */ 
    Agents_icon -> {AI_icon Semantic_Web_icon}; 
    AI_icon -> {Agents_icon Automata_icon Chaos_icon}; 
    Automata_icon -> {AI_icon Computers_icon}; 
    Berners_Lee_icon -> Semantic_Web_icon; 
    Biology_icon -> {AI_icon Chaos_icon Small_World_icon}; 
    Chaos_icon -> {AI_icon Biology_icon Computers_icon Semantic_Web_icon}; 
    Computers_icon -> {Chaos_icon Search_Engines_icon Semantic_Web_icon XML_icon}; 
    Cryptography_icon -> {Computers_icon Semantic_Web_icon}; 
    Dertouzos_icon -> {Berners_Lee_icon Computers_icon}; 
    Ontology_icon -> Semantic_Web_icon; 
    Rejewski_icon -> {Cryptography_icon Turing_icon}; 
    Search_Engines_icon -> Semantic_Web_icon; 
    Semantic_Web_icon -> {Agents_icon Computers_icon}; 
    Small_World_icon -> {Agents_icon Biology_icon Chaos_icon}; 
    Social_Networks_icon -> {Biology_icon Small_World_icon}; 
    Turing_icon -> {Automata_icon Computers_icon Cryptography_icon}; 
    XML_icon -> {Computers_icon Semantic_Web_icon}; 

    fontsize=28; 
    label="From Past to Future..."; 
} 

そして、それはそれは次のようになります。何の画像