github.com/darrenli6/fabric-sdk-example@v0.0.0-20220109053535-94b13b56df8c/bddtests/templates/html/graph.html (about)

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