D3 Examples - Network

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <title>Network Hovering</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@12.10.3/d3.geom.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@12.10.3/d3.layout.js"></script>
    
<style>
circle {
  stroke-width: 1.5px;
}
​
line {
  stroke: #999;
}
</style>  
​
    
  </head>
  <body>
​
<script>    
var w = 960,
    h = 500,
    r = 6,
    fill = d3.scale.category20();
​
R=18  
  
var force = d3.layout.force()
              .charge(-120)
              .linkDistance(30)
              .size([w, h]);
​
  
var svg = d3.select("body").append("svg:svg").attr("width", w).attr("height", h);
​
function load(json) {
​
var link = svg.selectAll("line").data(json.links).enter().append("svg:line");
​
var node = svg.selectAll("circle")
              .data(json.nodes)
              .enter()
              .append("svg:circle")
              .attr("r", r - .75)
              .style("fill", function(d) {return fill(d.group);})
              .style("stroke", function(d) {return d3.rgb(fill(d.group)).darker();})
              .call(force.drag)
              .on("mouseover", fade(.1))
              .on("mouseout", fade(1));;
​
  
    force.nodes(json.nodes).links(json.links).on("tick", tick).start();
​
    var linkedByIndex = {};
    json.links.forEach(function(d) {
        linkedByIndex[d.source.index + "," + d.target.index] = 1;
    });
​
    function isConnected(a, b) {
        return linkedByIndex[a.index + "," + b.index] || linkedByIndex[b.index + "," + a.index] || a.index == b.index;
    }
​
    function tick() {
        node.attr("cx", function(d) {
            return d.x = Math.max(r, Math.min(w - r, d.x));
        }).attr("cy", function(d) {
            return d.y = Math.max(r, Math.min(h - r, d.y));
        });
​
        link.attr("x1", function(d) {
            return d.source.x;
        }).attr("y1", function(d) {
            return d.source.y;
        }).attr("x2", function(d) {
            return d.target.x;
        }).attr("y2", function(d) {
            return d.target.y;
        });
    }
​
    function fade(opacity) {
        return function(d) {
            node.style("stroke-opacity", function(o) {
                thisOpacity = isConnected(d, o) ? 1 : opacity;
                this.setAttribute('fill-opacity', thisOpacity);
                return thisOpacity;
            });
​
            link.style("stroke-opacity", function(o) {
                return o.source === d || o.target === d ? 1 : opacity;
            });
        };
    }
}
load({
  "nodes": [
    {"name": "A", "group": 1},
    {"name": "B", "group": 1},
    {"name": "C", "group": 2},
    {"name": "D", "group": 2},
    {"name": "E", "group": 3},
    {"name": "F", "group": 3},
    {"name": "G", "group": 4},
    {"name": "H", "group": 5},
  ],
  "links": [
    {"source": 0, "target": 2, "value": 6},
    {"source": 4, "target": 6, "value": 1},
    {"source": 5, "target": 1, "value": 1},
    {"source": 3, "target": 4, "value": 1},
    {"source": 5, "target": 2, "value": 1},
    {"source": 1, "target": 6, "value": 1},
    {"source": 7, "target": 1, "value": 1}
  ]
}
);    
    </script>    
    
    
    
    
  </body>
</html>
    