D3.js add link with label - d3.js

Question

I'm using a force layout and i want to add new node with link on an existing graph.
Adding node is not a problem, I have an issue with the links.
I put labels on link like this :
Here's the code I use to draw the link :
var link = svg.selectAll(".link");
var links = []; // link array with source and target
[...]
var force = d3.layout.force()
.nodes(nodes)
.links(links)
[...]
link = link.data(force.links(), function (d) {
return d.source.id + "-" + d.target.id;
});
var appendL = link.enter().append("g")
.attr("class", "link");
linkLine = appendL.append("line")
.attr("class", "linkLine")
.style("stroke-width", 1);
linkLabel = appendL.append("text")
.attr("class", "linkLabel")
.attr("dy", 5)
.attr("filter", "url(#solid)")
.text(function (d) {
return d.type;
});
link.exit().remove();
(The filter is use to put a white background on the label).
But when I change my link list, the result is this :
The new link can move but the old ones are fixed and not attach to the node.
I think D3 is having problem to detect if a link is already on the graph.
If you have any idea ... thanks !
PS : Sorry for my english.

Answer 1

Basically you weren't selecting all the lines to update them.
When you update them, you need to select what's already there to 'overwrite' it so to speak. So move this into your update function :
node = svg.selectAll(".node").data(nodes)
link = svg.selectAll(".linkLine").data(links);
Notice I use the selectAll on .linkLine. This is as you give the links a class of linkLine so we need to select them all. Also the way you are appending the line is wrong. This is the correct way :
linkLine = link.enter().append("line")
.attr("class", "linkLine")
.style("stroke-width", 1);
linkLabel = link.append("text")
.attr("class", "linkLabel")
.attr("dy", 5)
.attr("filter", "url(#solid)")
.text(function(d) {
return d.type;
});
link.exit().remove();
Here is your updated fiddle : https://jsfiddle.net/reko91/wdouvab8/1/
Also need to do the labels. As you cant append text to a line in svg, the best way I could think of was to do something similar with the labels as was done with the links.
Create the container with the link data :
linkLabelContainer = svg.selectAll(".linkLabel").data(links);
Create the actual text element :
linkLabel = linkLabelContainer.enter().append("text")
.attr("class", "linkLabel")
.attr("dy", 5)
.attr("filter", "url(#solid)")
.text(function(d) {
return d.type;
});
Don't forget to remove :
linkLabelContainer.exit().remove();
Now position :
linkLabelContainer.attr("transform", function(d) { //calcul de l'angle du label
var angle = Math.atan((d.source.y - d.target.y) / (d.source.x - d.target.x)) * 180 / Math.PI;
return 'translate(' + [((d.source.x + d.target.x) / 2), ((d.source.y + d.target.y) / 2)] + ')rotate(' + angle + ')';
});
Notice I am moving the container on the tick event not the actual text element.
Updated fiddle : https://jsfiddle.net/reko91/wdouvab8/3/