JSFiddle - React, Tailwind, and code Playground

by JongMin Han

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cpettitt.github.io/project/dagre-d3/latest/dagre-d3.js"></script>
<svg id="dagre-d3" style="margin-top: 25px; border: 1px solid #ddd; width:100%; height:300px; background-color: #fff;"><g><g/></svg>

CSS

/* dagreD3 Example Style sheet */
div{
    text-align: center;
}
g.node {
    cursor: pointer;
}
 .dagreD3Node {
    fill: #eee;
    stroke: #bbb;
    stroke-width:1px;
}
.dagreD3NodeLabel {
    font-size: 20pt;
    color:#555;
    min-width: 80px;
    min-height: 60px;
    line-height: 60px;
    margin:0;
}
.dagreD3EdgeLabel {
    color:#666;
    font-size:10pt;
}
.highLight > rect, .highLight > circle {
    stroke: blue;
    stroke-width:2px;
}
.nodeFailCnt {
    color:#ff0033;
    font-size: 10pt;
}

JavaScript

var default_dagreD3e_style = "fill: rgba(255,255,255, 0); stroke: #d5d5d5; stroke-width: 1.5px;";
var default_dagreD3arrowhead_style = "fill: #c5c5c5; stroke: #c5c5c5; stroke-width:4px;";

var outbound_edge_style = "fill: rgba(255,255,255, 0); stroke: #800080; stroke-width: 1.5px;";
var outbound_arrowhead_style = "fill: #800080; stroke: #800080; stroke-width:4px;";

var inbound_edge_style = "fill: rgba(255,255,255, 0); stroke: #32CD32; stroke-width: 1.5px;";
var inbound_arrowhead_style = "fill: #32CD32; stroke: #32CD32; stroke-width:4px;";


var diagramData = [{
    "start": "MockServlet",
        "end": "Node_03",
        "edge_s": 5,
        "edge_f": 1,
        "node_f": 0
}, {
    "start": "Apache",
        "end": "MockServlet",
        "edge_s": 4,
        "edge_f": 2,
        "node_f": 1
}, {
    "start": "Node_01",
        "end": "Apache",
        "edge_s": 5,
        "edge_f": 0,
        "node_f": 0
}, {
    "start": "Apache",
        "end": "Node_03",
        "edge_s": 3,
        "edge_f": 1,
        "node_f": 2
}]
dagreD3_graph(diagramData, "#dagre-d3", 'group', null);


function create_graph_obj() {
    var g = new dagreD3.graphlib.Graph({
        directed: true,
        multigraph: false,
        compound: true
    });
    g.setGraph({
        rankdir: "LR", // Graph 방향
        ranksep: 100,
        nodesep: 30,
        marginx: 40,
        marginy: 40,
    });
    return g;
};

/// Dagre D3 Graph ///
function dagreD3_graph(data, disply_place, mode, open_G) {
    $(disply_place + " > g > *").remove();
    var svg = d3.select(disply_place),
        inner = svg.select("g");
    var render = new dagreD3.render();
    var g = create_graph_obj();

    make_closed_group_node(data, g);
    dagreD3_style_node_edge(g);

    // Set up zoom support
    var zoom = d3.behavior.zoom().on("zoom", function () {
        inner.attr("transform", "translate(" + d3.event.translate + ")" + "scale(" + d3.event.scale + ")");
    });
    svg.call(zoom);
    render(inner, g);
...