Network - hovering1

<!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>

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>

Modified http://mbostock.github.com/d3/d3.js to a secure url

Modified http://mbostock.github.com/d3/d3.geom.js to a secure url

Modified http://mbostock.github.com/d3/d3.layout.js to a secure url

https://mbostock.github.com/d3/d3.js

https://mbostock.github.com/d3/d3.geom.js

https://mbostock.github.com/d3/d3.layout.js