WIP

by lilyelle

CSS

@charset "utf-8";
/* CSS Document */

.header {
	font-family: sans-serif;
}

.node text { 
	pointer-events: none;
	font-family: sans-serif;
}


.line {
	stroke: #999;
}


.node type1 {
  fill:#690011;
}
.node type2 {
  fill:#BF0426;
}

.fadein{
display:none;
font-size:20px;
}

JavaScript

var w = 600,
    h = 500,
    r = 30,
    fill = d3.scale.category10()
    ;

var force = d3.layout.force()
        .charge(-1000)
        .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")
            .style("stroke", function(d) {
        					return fill(d.value)});

    var node = svg.selectAll("g.node")
            .data(json.nodes)
            .enter().append("svg:g")
            .attr("class", "node")
            .call(force.drag);
            
       	node.append("circle")
            .attr("r", 30)
            .style("fill", function(d) {
        					return fill(d.type)})
            .on("mouseover", fade(.1))
            .on("mouseout", fade(1));
            
           	node.on("mouseover", function (d) {
								link.style('stroke-width', function(l) {
				    			if (d === l.source || d === l.target)
				    				return 4;
				  				else
				    				return 2;
								})
        				d3.select(this).select('text')
									.transition()
									.duration(300)
									.text(function(d){
											return d.full_name;
											})
									.style("font-size","15px")
        
        });
            node.on("mouseout", function (d) {
            		d3.select(this).select('text')
									.transition()
									.duration(300)
									.text(function(d){return d.name;})
									.style("font-size","10px")
            })
            
            
            node.transition()
    					.duration(750)
    					.delay(function(d, i) { return i * 5; });
                    
            node.append("text")
                .attr("class", function(d){ return d.name })
                .attr("dx", 0)
                .attr("dy", ".35em")
                .style("font-size","10px")
                .style("font", "sans-serif")
             ...