Force Layout example

based on http://nyquist212.wordpress.com/2014/03/11/simple-d3-js-force-layout-example-in-less-than-100-lines-of-code/

HTML

<p>based on <a href="http://nyquist212.wordpress.com/2014/03/11/simple-d3-js-force-layout-example-in-less-than-100-lines-of-code/">this example</a>

CSS

.node {
    cursor: move;
    stroke: #fff;
    stroke-width: 1.5px;
}
.node.fixed {
    fill: #f00;
}
.link {
    stroke: #999;
    stroke-opacity: .6;
}

JavaScript

var graph = {
    "nodes": [

    {
        "name": "XXX.XXXX",
        "distance": 0,
        "M": 0
    }, {
        "name": "test",
        "distance": 0.2,
        "M": 0
    },
    {
        "name": "test2",
        "distance": 1.8,
        "M": 1213
    }],
        "links": [

    {
        "source": 0,
            "target": 0
    }, {
        "source": 0,
            "target": 1
    }, {
        "source": 1,
            "target": 2
    }]
};

/* Set the diagrams Height & Width */
var h = 600,
    w = 600;
/* Set the color scale we want to use */
var color = d3.scale.category20();
/* Establish/instantiate an SVG container object */
var svg = d3.select("body")
    .append("svg")
    .attr("height", h)
    .attr("width", w);
/* Build the directional arrows for the links/edges */
svg.append("svg:defs")
    .selectAll("marker")
    .data(["end"])
    .enter().append("svg:marker")
    .attr("id", String)
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 15)
    .attr("refY", -1.5)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto")
    .append("svg:path")
    .attr("d", "M0,-5L10,0L0,5");
/* Pre-Load the json data using the queue library */
makeDiag(graph.nodes, graph.links);
/* Define the main worker or execution function */
function makeDiag(nodes, links) {
    /* Draw the node labels first */
    var texts = svg.selectAll("text")
        .data(nodes)
        .enter()
        .append("text")
        .attr("fill", "black")
        .attr("font-family", "sans-serif")
        .attr("font-size", "10px")
        .text(function (d) {
        return d.name;
    });
    /* Establish the dynamic force behavor of the nodes */
    var force = d3.layout.force()
        .nodes(nodes)
        .links(links)
        .size([w, h])
        .linkDistance([250])
        // this messes up the x, y coordinates!
        //.linkDistance(function(d) { return Math.sqrt(d.distance);})
        .charge([-1500])
        .gravity(0.3)
        .start();
   ...