Why won't my D3 nodes display their text?

Question

Here's my JSfiddle:

Fiddle

I've tried the typical way to append text to a node like so:

node.append("text")
        .text(function(d) { return d.name; })
        .attr("text-anchor", "middle")
        .attr("font-size", "1.8em")
        .attr("y", 5);

But for some reason in this case it doesn't want to work. I've taken most of my code for this D3 graph from this stackoverflow question:

stackoverflow question

And the solution that the asker got doesn't work for me even though our code is nearly the same. Any ideas?

Answer 1

Since click listeners should work on both circle and text, you will have to group circle and text element. Use transform attribute of <g> elments for positioning of node.

var components = [{
    name: "component 1",
    id: "c1",
    children: [{
        name: "hardware 1",
        id: "h1",
        children: [{
            name: "software1",
            id: "s1"
        }],
    }, {
        name: "hardware 2",
        id: "h2",
        children: [{
            name: "software2",
            id: "s2"
        }, {
            name: "software3",
            id: "s3"
        }]
    }]
}];

var w = 600,
    h = 600,
    radius = 10,
    node,
    link,
    root;

var force = d3.layout.force()
    .on("tick", tick)
    .charge(function(d) {
        return -500;
    })
    .linkDistance(function(d) {
        return d.target._children ? 100 : 50;
    })
    .size([w, h - 160]);

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

root = components[0]; //set root node
root.fixed = true;
root.x = w / 2;
root.y = h / 2 - 80;
update();

function update() {
    var nodes = flatten(root),
        links = d3.layout.tree().links(nodes);

    // Restart the force layout.
    force.nodes(nodes)
        .links(links)
        .start();

    // Update the links…
    link = svg.selectAll(".link")
        .data(links);

    // Enter any new links.
    link.enter().insert("svg:line", ".node")
        .attr("class", "link")
        .attr("x1", function(d) {
            return d.source.x;
        })
        .attr("y1", function(d) {
            return d.source.y;
        })
        .attr("x2", function(d) {
            return d.target.x;
        })
        .attr("y2", function(d) {
            return d.target.y;
        });

    // Exit any old links.
    link.exit().remove();

    // Update the nodes…
    node = svg.selectAll(".node")
        .data(nodes);

    // Enter any new nodes.
    var g = node.enter().append("g")
        .attr("class", "node")
        .on("click", click)
        .call(force.drag);

    g.append("circle")
        .attr("r", radius);


    g.append("text")
        .text(function(d) {
            return d.name;
        })
        .attr("text-anchor", "middle")
        .attr("font-size", "1.8em")
        .attr("y", 5);


    // Exit any old nodes.
    node.exit().remove();


}

function tick() {
    link.attr("x1", function(d) {
            return d.source.x;
        })
        .attr("y1", function(d) {
            return d.source.y;
        })
        .attr("x2", function(d) {
            return d.target.x;
        })
        .attr("y2", function(d) {
            return d.target.y;
        });

    node.attr("transform", function(d) {
        return "translate(" + d.x + "," + d.y + ")";
    });
}

// Toggle children on click.
function click(d) {
    if (d.children) {
        d._children = d.children;
        d.children = null;
    } else {
        d.children = d._children;
        d._children = null;
    }
    update();
}

// Returns a list of all nodes under the root.
function flatten(root) {
    var nodes = [],
        i = 0;

    function recurse(node) {
        if (node.children) node.size = node.children.reduce(function(p, v) {
            return p + recurse(v);
        }, 0);
        if (!node.id) node.id = ++i;
        nodes.push(node);
        return node.size;
    }

    root.size = recurse(root);
    return nodes;
}

circle {
 cursor: pointer;
 stroke: #34495e;
 stroke-width: 2px;
 box-sizing: border-box;
 stroke-location: inside;
}

line.link {
 fill: none;
 stroke: #34495e;
 stroke-width: 1.5px;
}
circle {
   fill: lightsteelblue;
   stroke: #555;
   stroke-width: 3px;
 }
 circle.leaf {
   stroke: #fff;
   stroke-width: 1.5px;
 }
 path.hull {
   fill: lightsteelblue;
   fill-opacity: 0.3;
 }
 line.link {
   stroke: #333;
   stroke-opacity: 0.5;
   pointer-events: none;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>