Adding labels on force diagram d3 js
<p>I'm trying to add labels to a force graph that is created dynamically. Here is the code. </p>

<p>This is the relevant part of the code where I add the text elements. </p>

<pre><code>labels = labels.data(links);

labels.exit().remove();

labels.enter()
    .append("text")
    .attr("text-anchor", "middle")
    .attr("x", 0)
    .attr("dy", 16)
    .append("textPath")
    .attr("startOffset", "50%")
    .attr("xlink:href", function(d,i){ return "#id" + i})
    .text("label");
</code></pre>

<p>Here is a fiddle I created that demonstrates the problem. - <a href="https://jsfiddle.net/soorajchn/u49s9sth/" rel="nofollow">https://jsfiddle.net/soorajchn/u49s9sth/</a></p>

<p>(Since its large <code>stackoverflow</code> does not allow me to create the code snippet of that size )</p>

<p>If i click the add button a node will be created and a connecting line can be drawn by dragging from one node to another. To move around a node use ctrl + drag.</p>

<p>I'm trying to add the label and the text element is getting added. But it always takes up 0 height and width and ends up at top left corner of the screen. What am i doing wrong ? </p>