We Keep Coding

d3.js forceSimulation() with zoom and drag (I can't add a text label with nodes' info) [duplicate]

This is my code look like, you can also have full code on JsFiddle .
I want to have labels on every node, but I can't.
By the way, labels can be embedded in the circle in the console.
var nodes = svg.selectAll("circle")
.data(dataset.nodes)
.enter()
.append("circle")
.attr("r", 10)
.style("fill", function(d, i){
return colors(i);
})
.call(force.drag);
var label = nodes.append("svg:text")
.text(function (d) { return d.name; })
.style("text-anchor", "middle")
.style("fill", "#555")
.style("font-family", "Arial")
.style("font-size", 12);
force.on("tick", function(){
edges.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; });
nodes.attr("cx", function(d){ return d.x; })
.attr("cy", function(d){ return d.y; });
label.attr("x", function(d){ return d.x; })
.attr("y", function (d) {return d.y - 10; });
});

Right now, you are appending the text elements to the circle elements, and that simply won't work.
When you write...
var label = nodes.append("svg:text")
You're appending the texts to the nodesselection. However, you have to keep in mind what nodes is:
var nodes = svg.selectAll("circle")
.data(dataset.nodes)
.enter()
.append("circle")
Thus, you are appending the texts to circles, and that doesn't work. They show up when you inspect the page (as <circle><text></text></circle>), but nothing will actually show up in the SVG.
Solution: just change to:
var label = svg.selectAll(null)
.data(dataset.nodes)
.enter()
.append("text")
.text(function (d) { return d.name; })
.style("text-anchor", "middle")
.style("fill", "#555")
.style("font-family", "Arial")
.style("font-size", 12);
Here is the fiddle: https://jsfiddle.net/gerardofurtado/7pvhxfzg/1/

Can't append text to d3.js force layout nodes

OBJECTIVE: append text to each node in a d3 force layout
BUG: text is appended to the object (I think, see console) but not displayed on screen
Here's the jsfiddle.
node.append("svg:text")
.text(function (d) { return d.name; }) // note that this works for
// storing the name as the id, as seen by selecting that element by
// it's ID in the CSS (see red-stroked node)
.style("fill", "#555")
.style("font-family", "Arial")
.style("font-size", 12);
I'd be so grateful for any thoughts.

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:
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", 5)
.style("fill", function (d) {
return color(d.group);
});
var label = node.append("svg:text")
.text(function (d) { return d.name; })
.style("text-anchor", "middle")
.style("fill", "#555")
.style("font-family", "Arial")
.style("font-size", 12);
Of course, tick function should be updated accordingly: (also css a little bit)
circle.attr("cx", function (d) {
return d.x;
})
.attr("cy", function (d) {
return d.y;
});
label.attr("x", function (d) {
return d.x;
})
.attr("y", function (d) {
return d.y - 10;
});
Here is jsfiddle.

Display text/label on Nodes, D3.js force directed graph

I don't understand how to display text on my nodes
I tried several times but didn't work, please help me to solve it
I'm not familiar with D3.js at all but I need to visualize a graph for my project, and I need this additional feature (display label) on the nodes
Here is the input file:
{
"nodes":[
{"name":"A","group":0},
{"name":"B","group":1},
{"name":"C","group":2},
{"name":"D","group":3},
{"name":"E","group":4}
],
"links":[
{"source":0,"target":1,"value":11},
{"source":0,"target":2,"value":11},
{"source":1,"target":2,"value":21},
{"source":1,"target":3,"value":21},
{"source":1,"target":4,"value":21},
{"source":2,"target":3,"value":21},
{"source":2,"target":4,"value":21},
{"source":3,"target":4,"value":11}
]
}
D3.js Code:
<script type="text/javascript">
// use print_graph() method to output graph vertices
main_graph();
var width = 700,
height = 300;
var color = d3.scale.category20();
var force = d3.layout.force()
.charge(-120)
.linkDistance(150)
.size([width, height]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.attr("transform", "translate(0,0)");
d3.json("input.json", function(error, graph) {
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 Math.sqrt(d.value);
});
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("circle")
.attr("class", "node")
// size of nodes
.attr("r", 20)
.style("fill", function(d) {
return color(d.group);
})
.call(force.drag);
//I'm stuck here
var texts = svg.selectAll("text.label")
.data(graph.nodes)
.enter().append("text")
.attr("class", "label")
.attr("fill", "white")
.text(function(d) {
return d.name;
});
/*
// 1st trying
var text = svg.selectAll("text")
.data(graph.node)
.enter().append("text")
.attr("fill","white")
.text(function (d) {return d.name; });
*/
// another trying
//node.append("text")
//.text(function(d) { return d.name; });
node.append("title")
.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("cx", function(d) {
return d.x;
})
.attr("cy", function(d) {
return d.y;
});
});
});
</script>

How you are adding the text is fine but in your force.on("tick", function() {}) handler you don't position the them:
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("cx", function(d) {
return d.x;
})
.attr("cy", function(d) {
return d.y;
});
texts.attr("x", function(d) { //<-- NEED TO POSITION THESE TOO
return d.x;
})
.attr("y", function(d) {
return d.y;
});
});
Here's your code fixed.

Need help modifying d3.js Collapsible Force Layout

I am modifying the d3.js Collapsible Force Layout where the nodes are given as circles.
http://bl.ocks.org/mbostock/1062288
I changed it to a group g and attached the circle into the g. The problem is that in the tick function when I change from
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
to
node.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
the nodes are all displaced.
I have changed the reference to node so node refers to the group g in the second case.
I have created force layouts and have done this a lot of times but never faced this problem.
Is it because of the d3.tree.layout? I don't know. Please help.
I have tried a few more times with other svg elements like text and rect and I found out that the problem occurs only when there is circle involved and I need to give attributes like cx and cy to text and rect even though these elements don't have these attributes, to make them work.
So please help someone. Totally confused.
Code::
var link = svg.selectAll(".link"),
node = svg.selectAll(".node");
link = link.data(force.links());
// Exit any old links.
link.exit().remove();
// Enter any new links.
link.enter().insert("line",".node")
.attr("class", "link")
.attr("x1", function(d,i) { 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; });
// Update the nodes…
node = node.data(force.nodes(), function(d) { return d.id; }).style("fill", color);
// Exit any old nodes.
node.exit().remove();
// Enter any new nodes.
node.enter().append("g")
.attr("class", "node")
.attr("title",function(d) { return d.name || d.layout; })
.on("click", click)
.call(force.drag);
node.append("circle")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", function(d) { return 4.5; })
.style("fill", color);
node.append("text")
.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; })
.attr("fill","red")
.attr("stroke","red")
.style("font-size","9px")
.on("click",click)
.text(function(d){return d.name})
.call(force.drag);
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("cx", function(d) { return d.x; })
// .attr("cy", function(d) { return d.y; });
node.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
}
Here's the code that generates the faulty graph.

The problem is that you're setting the coordinates twice; on the actual elements and on the g containing them:
node.append("circle")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", function(d) { return 4.5; })
.style("fill", color);
(similarly for the text elements) and
node.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
This causes the offset. To fix, just set one of them (the translation on the g elements):
node.append("circle")
.attr("r", function(d) { return 4.5; })
.style("fill", color);
node.append("text")
.attr("fill","red")
.attr("stroke","red")
// etc

d3.js: How to add labels to scatter points on graph

I am trying to add labels to the scatter points on this graph: http://bost.ocks.org/mike/d3/workshop/dot-chart.html
I thought that modifying this code a little bit would work, but it didn't:
svg.selectAll(".dot")
.append("text")
.text("fooLabelsOfScatterPoints");

Mike Robinson, your example helped.
For those who are wondering, here is what I did:
I removed:
svg.selectAll(".dot")
.data(data)
.enter().append("circle")
.attr("class", "dot")
.attr("cx", function(d) { return x(d.x); })
.attr("cy", function(d) { return y(d.y); })
.attr("r", 12);
and added:
var node = svg.selectAll("g")
.data(data)
.enter()
.append("g");
node.append("circle")
.attr("class", "dot")
.attr("cx", function(d) { return x(d.x); })
.attr("cy", function(d) { return y(d.y); })
.attr("r", 12);
node.append("text")
.attr("x", function(d) { return x(d.x); })
.attr("y", function(d) { return y(d.y); })
.text("fooLabelsOfScatterPoints");
I appended "text" tags onto "g" tags, as opposed to appending "text" tags onto "circle" tags.

When I tried the node solution, some of my data disappeared (?), so I just added a new class called "dodo" which worked for me:
svg.selectAll(".dot")
.data(data)
.enter().append("circle")
.attr("class", "dot")
.attr("r", 3.5)
.attr("cx", function(d) { return x(d.time); })
.attr("cy", function(d) { return y(d.place); })
.style("fill", function(d) { return color(d.species); });
svg.selectAll(".dodo")
.data(data)
.enter().append("text")
.attr("class", "dodo")
.attr("x", function(d) { return x(d.time); })
.attr("y", function(d) { return y(d.place); })
.attr("dx", ".71em")
.attr("dy", ".35em")
.text(function(d) { return d.name;});