dagre-d3 基于d3.js v3版本以上

最新推荐文章于 2024-08-08 07:36:30 发布

冷色系微风爱丶

最新推荐文章于 2024-08-08 07:36:30 发布

阅读量1.8k

点赞数

分类专栏： svg

svg 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

基于d3 v3 和 v4 的变化

https://github.com/dagrejs/dagre-d3/commit/ebbb84f03bd169061f40d7a1df82cb3b51860187

弹窗 tipsy.js tipsy.css

https://blog.csdn.net/czy279470138/article/details/90240610

基于d3.v3

dagre-d3 引入0.3.0 版本

直线变曲线 lineInterpolate: 'basis'

默认矩阵，可以设置为圆 shape: "circle"

默认为矩阵可以变为圆椭圆四边形

g.setNode("rect", { shape: "rect" });
g.setNode("circle", { shape: "circle" });
g.setNode("ellipse", { shape: "ellipse" });


<!doctype html>

<meta charset="utf-8">
<title>dagre-v3.3x</title>

<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<!--<script src="https://cdn.bootcss.com/dagre-d3/0.4.18/dagre-d3.js"></script>-->
<!--<script src="https://cdn.bootcss.com/dagre-d3/0.5.0/dagre-d3.js"></script>-->
<!--<script src="https://cdn.bootcss.com/dagre-d3/0.4.17/dagre-d3.js"></script>-->
<script src="http://www.samsarin.com/project/dagre-d3/v0.3.0/dagre-d3.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="tipsy.css">
<script src="tipsy.js"></script>
<style id="css">
    text {
        font-weight: 300;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
        font-size: 14px;
    }

    .node rect {
        stroke: #333;
        fill: #fff;
    }

    .edgePath path {
        stroke: #333;
        fill: #333;
        stroke-width: 1.5px;
    }

    .node text {
        pointer-events: none;
    }
    .node circle{
        stroke: #333;
        fill: #fff;
    }

    /* This styles the title of the tooltip */
    .tipsy .name {
        font-size: 1.5em;
        font-weight: bold;
        color: #60b1fc;
        margin: 0;
    }

    /* This styles the body of the tooltip */
    .tipsy .description {
        font-size: 1.2em;
    }
</style>

<svg width=960 height=1000></svg>


<script>
    // Create a new directed graph
    var g = new dagreD3.graphlib.Graph().setGraph({ rankdir: 'BT' });

    // States and transitions from RFC 793
    var states = {
        "circle":{ shape: "circle",description: "represents no connection state at all." },
        Start: {style: "fill: #f77"},
        "JW002": {description: "represents no connection state at all."},
        "JW003": {description: "represents no connection state at all."},
        "JW004": {},
        "JW005": {description: "represents no connection state at all."},
        "JW006": {description: "represents no connection state at all."},
        "JW007": {},
        "JW008": {},
        "JW009": {},
        "JW010": {},
        "JW011": {},
        "JW012": {},
        "JW013": {},
        "JW014": {},
        "JW015": {},
        "JW016": {},
        "End": {}
    };

    // Add states to the graph, set labels, and style
    Object.keys(states).forEach(function(state) {
        var value = states[state];
        value.label = state;
        value.rx = value.ry = 5;
        g.setNode(state, value);
    });
    // Set up the edges
    g.setEdge("circle",     "JW002",     { label: "open", lineInterpolate: 'basis' });
    g.setEdge("Start",   "JW003",      { label: "rcv ACK of SYN", lineInterpolate: 'basis'  });
    g.setEdge("Start",   "JW004",   { label: "rcv SYN", lineInterpolate: 'basis'  });

    g.setEdge("JW002",   "JW005",      { label: "rcv SYN, ACK", lineInterpolate: 'basis'  });
    g.setEdge("JW002",   "JW006",     { label: "close", lineInterpolate: 'basis'  });

    g.setEdge("JW003",      "JW006",  { label: "close", lineInterpolate: 'basis'  });
    g.setEdge("JW003",      "JW007",  { label: "close", lineInterpolate: 'basis'  });

    g.setEdge("JW004",      "JW008",  { label: "close", lineInterpolate: 'basis'  });
    g.setEdge("JW004",      "JW009",  { label: "close", lineInterpolate: 'basis'  });

    g.setEdge("JW005",      "JW010",  { label: "close", lineInterpolate: 'basis'  });
    g.setEdge("JW005",      "JW011",  { label: "close", lineInterpolate: 'basis'  });
    g.setEdge("JW005",      "JW012",  { label: "close", lineInterpolate: 'basis'  });

    g.setEdge("JW006",      "JW013",  { label: "close", lineInterpolate: 'basis'  });

    g.setEdge("JW007",      "JW014",  { label: "close", lineInterpolate: 'basis'  });
    g.setEdge("JW007",      "JW015",  { label: "close", lineInterpolate: 'basis'  });

    g.setEdge("JW008",      "JW016",  { label: "close", lineInterpolate: 'basis'  });

    g.setEdge("JW009",      "JW015",  { label: "close", lineInterpolate: 'basis'  });
    g.setEdge("JW009",      "JW016",  { label: "close", lineInterpolate: 'basis'  });

    g.setEdge("JW010",      "End",  { label: "close", lineInterpolate: 'basis'  });
    g.setEdge("JW011",      "End",  { label: "close", lineInterpolate: 'basis'  });
    g.setEdge("JW012",      "End",  { label: "close", lineInterpolate: 'basis'  });
    g.setEdge("JW013",      "End",  { label: "close", lineInterpolate: 'basis'  });
    g.setEdge("JW014",      "End",  { label: "close", lineInterpolate: 'basis'  });
    g.setEdge("JW015",      "End",  { label: "close", lineInterpolate: 'basis'  });
    g.setEdge("JW016",      "End",  { label: "close", lineInterpolate: 'basis'  });

    // Create the renderer
    var render = new dagreD3.render();

    // Set up an SVG group so that we can translate the final graph.
    var svg = d3.select("svg"),
        inner = svg.append("g");

    // Set up zoom support
    var zoom = d3.behavior.zoom().scaleExtent([0.1, 100])
        .on("zoom", function() {
          inner.attr('transform',
              "translate(" + d3.event.translate + ")" +
              "scale(" + d3.event.scale + ")"
          )
        });
    svg.call(zoom);

    // Simple function to style the tooltip for the given node.
    var styleTooltip = function(name, description) {
      return "<p class='name'>" + name + "</p><p class='description'>" + description + "</p>";
    };

    // Run the renderer. This is what draws the final graph.
    render(inner, g);

    inner.selectAll("g.node")
    .attr("title", function(v) { return styleTooltip(v, g.node(v).description) })
    .each(function(v) { $(this).tipsy({ gravity: "w", opacity: 1, html: true }); });
 
</script>