d3js text not showing on node graph

Question

Wondering if you can help. I have tried different stylings and different d3js examples but they all fail to show the text on the node. Any ideas this would be?

The task is quite simple really. Show the text on top of a node. I really have no idea why this is not working so your help is much appreciated.

Many thanks for your help in advance.

Below is the code, but for convenience here is the fiddle http://jsfiddle.net/rg5pmrz1/




    
    Force Layout Example 1

davidhwang · Accepted Answer

From the answers to duplicate questions here and here, it is because:

You can't add svg text to a svg circle. You should first create an svg g object (g stands for group) for each node, and than add a circle and a text for each g element, like in this code:

jsFiddle. Note the additional code in the tick function.

var width = window.innerWidth - 20,
    height = innerHeight - 20;

var color = d3.scale.category10();

var force = d3.layout.force()
    .charge(-300)
    .linkDistance(function (l) { return l.value; })
    .gravity(0.03)
    .friction(0.9)
    .size([width, height]);

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

var graph = getData();

var nodeMap = {};

graph.nodes.forEach(function(d) { 

    nodeMap[d.name] = d;
    //centering first element   
   if(d.main == true)
   {
        graph.nodes[0].x = width / 2;
        graph.nodes[0].y = height / 2;
    }

});

graph.links.forEach(function(l) {
    l.source = nodeMap[l.source];
    l.target = nodeMap[l.target];
    l.distance = l.value;
    l.size = l.value;
})

force.nodes(graph.nodes)
    .links(graph.links)
    .start();

var link = svg.selectAll(".link")
    .data(graph.links)
    .enter().append("line")
    .attr("class", "link")
    .style("stroke-width", function(d) {
        return 1 / (d.value / 1000);
    });

var node = svg.selectAll(".node")
    .data(graph.nodes)
    .enter().append("g");

var circle = node.append("circle")
    .attr("class", "node")
    .attr("id", function (d) { return d.name; })
    .attr("r", 30)
    .style("fill", function (d) {
        return color(d.group);
    })
    .on("mouseover", mouseover)
    .on("mouseout", mouseout)
    .call(force.drag);

var label = node.append("svg:text")
    .text(function(d) { return d.name; });

force.on("tick", function() {
    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) {
        console.log(d);
        return 'translate(' + [d.x, d.y] + ')'; 
    });
});

function mouseover() {
    console.log("mouse over");
  d3.select(this).transition()
      .duration(250)
      .attr("r", 60);
}

function mouseout() {
    console.log("mouse out");
  d3.select(this).transition()
      .duration(250)
      .attr("r", 30);
}

function click() {
    console.log("clicky clicky");
  d3.select(this).transition()
      .duration(250)
      .attr("r", 60);
}



function getData() {

  return {
  "nodes":[
      {"name":"John","group":1, "value": 1, "main": true},
    {"name":"Mike","group":2, "value": 2},
    {"name":"Ian","group":1, "value": 3},
    {"name":"James","group":2, "value": 4},
    {"name":"Sarah","group":2,"value": 5}
  ],
  "links":[
    {"source":"John","target":"Mike","value":100},
    {"source":"Ian","target":"John","value":200},
    {"source":"John","target":"James","value":100},
    {"source":"Sarah","target":"John","value":300},
  ] };    

}

d3js text not showing on node graph

Answers (2)

Related Questions