github.com/leonlxy/hyperledger@v1.0.0-alpha.0.20170427033203-34922035d248/bddtests/templates/html/graph.html (about)

     1  <style>
     2  
     3  .links line {
     4    stroke: #999;
     5    stroke-opacity: 0.6;
     6  }
     7  
     8  .nodes circle {
     9    stroke: #fff;
    10    stroke-width: 1.5px;
    11  }
    12  
    13  </style>
    14  <div>
    15  <svg width="860" height="700"></svg>
    16  </div>
    17  <script src="https://d3js.org/d3.v4.min.js"></script>
    18  <script>
    19  
    20  var svg = d3.select("svg"),
    21      width = +svg.attr("width"),
    22      height = +svg.attr("height");
    23  
    24  var color = d3.scaleOrdinal(d3.schemeCategory20);
    25  
    26  var simulation = d3.forceSimulation()
    27      .force("link", d3.forceLink().id(function(d) { return d.id; }).distance(function(d) {
    28          if (d.source.id.indexOf("peer") === 0 && d.target.id.indexOf("orderer") === 0) {
    29  			return 200} else return 50}))
    30      .force("charge", d3.forceManyBody().strength(function(d) {
    31          if (d.type==="org") {
    32  			return -120} else return -30}))
    33      .force("center", d3.forceCenter(width / 2, height / 2));
    34  
    35  d3.json("network.json", function(error, graph) {
    36    if (error) throw error;
    37  
    38    var link = svg.append("g")
    39        .attr("class", "links")
    40      .selectAll("line")
    41      .data(graph.links)
    42      .enter().append("line")
    43        .attr("stroke-width", function(d) { return Math.sqrt(d.value); });
    44  
    45    var node = svg.append("g")
    46        .attr("class", "nodes")
    47      .selectAll("circle")
    48      .data(graph.nodes)
    49      .enter().append("circle")
    50        .attr("r", 10)
    51        .attr("fill", function(d) { return color(d.group); })
    52        .call(d3.drag()
    53            .on("start", dragstarted)
    54            .on("drag", dragged)
    55            .on("end", dragended));
    56  
    57    node.append("title")
    58        .text(function(d) { return d.id; });
    59  
    60    simulation
    61        .nodes(graph.nodes)
    62        .on("tick", ticked);
    63  
    64    simulation.force("link")
    65        .links(graph.links);
    66  
    67    function ticked() {
    68      link
    69          .attr("x1", function(d) { return d.source.x; })
    70          .attr("y1", function(d) { return d.source.y; })
    71          .attr("x2", function(d) { return d.target.x; })
    72          .attr("y2", function(d) { return d.target.y; });
    73  
    74      node
    75          .attr("cx", function(d) { return d.x; })
    76          .attr("cy", function(d) { return d.y; });
    77    }
    78  });
    79  
    80  function dragstarted(d) {
    81    if (!d3.event.active) simulation.alphaTarget(0.3).restart();
    82    d.fx = d.x;
    83    d.fy = d.y;
    84  }
    85  
    86  function dragged(d) {
    87    d.fx = d3.event.x;
    88    d.fy = d3.event.y;
    89  }
    90  
    91  function dragended(d) {
    92    if (!d3.event.active) simulation.alphaTarget(0);
    93    d.fx = null;
    94    d.fy = null;
    95  }
    96  
    97  </script>