Adding text to circle nodes d3

Question

I am trying to add text to some circle nodes but I am having trouble doing so.

Here is the code for the main file. I am trying to create a second set of nodes called namenodes that contain text and then I am trying to attach namenodes to the original nodes that contain the circles. I'm not sure if this is the correct approach for this problem. When ever I run the code below, a bunch of black circles appear in the top left corner. I don't care if all of the nodes say the same thing but I would at least like to have some text appear. I think that the problem lies within the line

var namenodes = d3.range(200).map(function() { return {name: "hello"};}),

but I am not sure. It compiles without errors but it's not doing what I want. Any insight would be appreciated.

    var nodes = d3.range(200).map(function() {
        return {
            radius: Math.random() * 12 + 4
        };
    }),
        root = nodes[0],
        color = d3.scale.category10();

    //my code
    var namenodes = d3.range(200).map(function() { return {name: "hello"};}),
        nameroot = namenodes[0],
        color = "black";

    root.radius = 0;
    root.fixed = true;

    nameroot.radius = 0;
    nameroot.fixed = true;


    var force = d3.layout.force()
        .gravity(0.05)
        .charge(function(d, i) {
        return i ? 0 : -2000;
    })
        .nodes(nodes)
        .size([width, height]);

   // var force = d3.layout.force()
        //.gravity(0.05)
        //.charge(function(d, i) {
        //.nodes(namenodes)
        //.size([width, height]); 

    force.start();

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

    svg.selectAll("circle")
        .data(nodes.slice(1))
        .enter().append("circle")
        .attr("r", function(d) {
        return d.radius;
    })
        .style("fill", function(d, i) {
        return color(i % 50);
    });
    //my code
    //svg.selectAll("names")
        //.data(namenodes.slice(1))
        //.enter().append("names")
        //.style(color);


    force.on("tick", function(e) {
        var q = d3.geom.quadtree(nodes),
            i = 0,
            n = nodes.length;

        while (++i < n) q.visit(collide(nodes[i]));

        svg.selectAll("circle")
            .attr("cx", function(d) {
            return d.x;
        })
            .attr("cy", function(d) {
            return d.y;
        });

    });

    svg.on("mousemove", function() {
        var p1 = d3.mouse(this);
        root.px = p1[0];
        root.py = p1[1];
        //force.resume();
    });

    svg.on("click", function() {
        if (force.alpha()) {
            force.stop();
        } else {
            force.resume();
        }
    });

    svg.selectAll("circle").on("click", function() {
        d3.event.stopPropagation();
        this.remove();
    });

    function collide(node) {
        var r = node.radius + 16,
            nx1 = node.x - r,
            nx2 = node.x + r,
            ny1 = node.y - r,
            ny2 = node.y + r;
        return function(quad, x1, y1, x2, y2) {
            if (quad.point && (quad.point !== node)) {
                var x = node.x - quad.point.x,
                    y = node.y - quad.point.y,
                    l = Math.sqrt(x * x + y * y),
                    r = node.radius + quad.point.radius;
                if (l < r) {
                    l = (l - r) / l * .5;
                    node.x -= x *= l;
                    node.y -= y *= l;
                    quad.point.x += x;
                    quad.point.y += y;
                }
            }
            return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
        };
    }
</script>