Force Miserables Fading SO

by Vivid D

CSS

circle {
    stroke-width: 1.5px;
}
line {
    stroke: #999;
}

JavaScript

var w = 960,
    h = 500,
    r = 6,
    fill = d3.scale.category20();

var force=d3.layout.force()
    .gravity(.01)
    .charge(-120)
    .linkDistance(30)
    .size([w, h]);

var svg = d3.select("body")
    .append("svg:svg")
    .attr("width", w)
    .attr("height", h);

var json = getData();

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", opacity)
            .style("stroke-opacity", function(o) {
                return...