D3NodeLabels

Basic force directed layout with labels

HTML

<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script type="application/json" id="mis">
    {
        "nodes": [{
            "name": "Myriel",
                "group": 1
        }, {
            "name": "Napoleon",
                "group": 1
        }, {
            "name": "Mlle.Baptistine",
                "group": 1
        }, {
            "name": "Mme.Magloire",
                "group": 1
        }, {
            "name": "CountessdeLo",
                "group": 1
        }, {
            "name": "Geborand",
                "group": 1
        }, {
            "name": "Champtercier",
                "group": 1
        }, {
            "name": "Cravatte",
                "group": 1
        }, {
            "name": "Count",
                "group": 1
        }, {
            "name": "OldMan",
                "group": 1
        }, {
            "name": "Labarre",
                "group": 2
        }, {
            "name": "Valjean",
                "group": 2
        }, {
            "name": "Marguerite",
                "group": 3
        }, {
            "name": "Mme.deR",
                "group": 2
        }, {
            "name": "Isabeau",
                "group": 2
        }, {
            "name": "Gervais",
                "group": 2
        }, {
            "name": "Tholomyes",
                "group": 3
        }, {
            "name": "Listolier",
                "group": 3
        }, {
            "name": "Fameuil",
                "group": 3
        }, {
            "name": "Blacheville",
                "group": 3
        }, {
            "name": "Favourite",
                "group": 3
        }, {
            "name": "Dahlia",
                "group": 3
        }, {
            "name": "Zephine",
                "group": 3
        }, {
            "name": "Fantine",
                "group": 3
        }, {
            "name": "Mme.Thenardier",
                "group": 4
        }, {
            "name":...

CSS

.link {
  stroke: #ccc;
}

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

JavaScript

//Do the same with the circles for the nodes - no 
//Changed
var node = svg.selectAll(".node")
    .data(graph.nodes)
    .enter().append("g")
    .attr("class", "node")
    .call(force.drag);

node.append("circle")
    .attr("r", 8)
    .style("fill", function (d) {
    return color(d.group);
})

node.append("text")
      .attr("dx", 10)
      .attr("dy", ".35em")
      .text(function(d) { return d.group });
      
//End changed