D3:Learning:Force Directed Graph:Curved Edges

A starting point to clone and get investigating quickly.

by Shankar

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="viz" />

CSS

#viz {
    border:solid 1px #C0C0C0;
}
.node {
    stroke: #000;
    stroke-width: 1.5px;
    fill: #FF0000;
}
.link {
    fill: none;
    stroke: #bbb;
}

JavaScript

$(function () {


    var width = 600,
        height = 250;


    var svg = d3.select("#viz")
        .append("svg")
        .attr("width", width)
        .attr("height", height);


    //d3.json("/d/4062045/miserables.json", function(error, graph) {
    //var d; try {d = JSON.parse(data2);}catch(e){alert(e);}
    renderGraph(svg, width, height, data2);

});



function renderGraph(svg, width, height, graph) {
    //slice up the data:
    var nodes = graph.nodes.slice(),
        links = [],
        bilinks = [];

    //whereas nodes will be a copy of the src nodes
    //links will not be a direct copy.
    //links will be a a new array of links in both directions.
    
    
    //One of the 4 builtin pallets:
    var color = d3.scale.category20();



    //for each link definition, get (s)source and (t)arget id,
    graph.links.forEach(function (link) {
        //Use the link to get to the source and target node:
        var s = nodes[link.source],
            t = nodes[link.target],
            i = {}; // a single intermediate node
        
        //TODO: CHECK.
        //at this point, I think the number of intermediate nodes
        //is a funciton of the force algorythm, and is left empty
        //for the engine to fill in. 

        //and push onto nodes the empty intermediate nodes array:
        //TODO: Don't understand this part yet:
        nodes.push(i);

        //create two new links onto the link array, 
        //from source to intermediate, and from intermediate to target
        //TODO: still don't get this part...
        links.push({
            source: s,
            target: i //target that doesn't yet have a place.
        }, {
            source: i, //source that doesn't yet have a place.
            target: t
        });
        
        bilinks.push([s, i, t]);
    });

    //Using https://github.com/mbostock/d3/wiki/Force-Layout
    var force = d3.layout.force()
        .linkDistance(10)
        .linkStrength(2)
        .size([width,...