Name: Password: Sign in

本文在 署名-非商业性使用-相同方式共享 3.0 版权协议下发布, 转载请注明出自 kyleslight.net

Graphviz 测试

digraph G{
    rankdir=RL;
    a[label = "A(0.1)"]
    b[label = "B(0.25)"]
    c[label = "C(0.05)"]
    d[label = "D(0.15)"]
    e[label = "E(0.3)"]
    f[label = "F(0.07)"]
    g[label = "G(0.08)"]
    cf[label = "0.12"]
    ag[label = "0.18"]
    cfd[label = "0.27"]
    agb[label = "0.43"]
    cfde[label = "0.57"]
    agbcfde[label = "1"]

    c->cf[label="0111", fontcolor="red"];
    f->cf[label="0110", fontcolor="red"];
    a->ag[label="110", fontcolor="red"];
    g->ag[label="111", fontcolor="red"];
    cf->cfd[label="011", fontcolor="red"];
    d->cfd[label="010", fontcolor="red"];
    ag->agb[label="11", fontcolor="red"];
    b->agb[label="10", fontcolor="red"];
    cfd->cfde[label="01", fontcolor="red"];
    e->cfde[label="00", fontcolor="red"];
    agb->agbcfde[label="1", fontcolor="red"];
    cfde->agbcfde    [label="0", fontcolor="red"];
}

Graphviz 介绍

Graphviz 是一种使用 DOT 脚本进行绘图的开源工具,用它可以较为方便的绘制图论以及其他领域的图形;当图形中的元素是自动生成或者不希望人为去处理元素的摆放与样式时 Graphviz 可以帮你自动完成这一点。

关于 DOT 脚本的语法可以参考 这里

以下是官网中的一个例子:

digraph G {

    subgraph cluster_0 {
        style=filled;
        color=lightgrey;
        node [style=filled,color=white];
        a0 -> a1 -> a2 -> a3;
        label = "process #1";
    }

    subgraph cluster_1 {
        node [style=filled];
        b0 -> b1 -> b2 -> b3;
        label = "process #2";
        color=blue
    }
    start -> a0;
    start -> b0;
    a1 -> b3;
    b2 -> a3;
    a3 -> a0;
    a3 -> end;
    b3 -> end;

    start [shape=Mdiamond];
    end [shape=Msquare];
}

上面这段脚本会转换成:

digraph G {

    subgraph cluster_0 {
        style=filled;
        color=lightgrey;
        node [style=filled,color=white];
        a0 -> a1 -> a2 -> a3;
        label = "process #1";
    }

    subgraph cluster_1 {
        node [style=filled];
        b0 -> b1 -> b2 -> b3;
        label = "process #2";
        color=blue
    }
    start -> a0;
    start -> b0;
    a1 -> b3;
    b2 -> a3;
    a3 -> a0;
    a3 -> end;
    b3 -> end;

    start [shape=Mdiamond];
    end [shape=Msquare];
}

title: cluster

对 Graphviz 的定制

目前 kyleslight.net 的编辑器已经加入了对 Graphviz 的支持,通过引入 DOT 代码片段可以像编辑普通的 Markdown 一样实时编译并输出 SVG 直接用于浏览器渲染(感谢 https://github.com/mdaines/viz.js/ 这个轮子的强力帮助:)

引入 Graphviz 的编辑器视角:

至于生成结果嘛,参考最开始那颗 Huffman 树 :)

Copyright (c) 2014-2016 Kyles Light.
Powered by Tornado.
鄂 ICP 备 15003296 号