Text Transition on Click D3.js
<p>I have been searching on the internet for a simple fiddle of taking text with two x y coordinates and transitioning it from point 1 to point 2 but cannot seem to find anything if anyone knows of any examples it would be much appreciated. However on to the main point This first snippet of code successfully plots text at the center of the point.</p>

<pre><code>    svg.selectAll("text")
   .data(data)
   .enter()
   .append("text")
    .text(function(d) {
        return d.Name;
   })
   .attr("x", function(d) {
        return xScale(d.x);
   })
   .attr("y", function(d) {
        return yScale(d.y);
   })
   .attr("font-family", "sans-serif")
   .attr("font-size", "0.5px")
   .style('text-anchor','middle')
   .attr("fill", "black")
</code></pre>

<p>This transition is an attempt to change the text and transition to new locations </p>

<pre><code>    svg.selectAll('text') 
    .on('click', function (d) {

    svg.selectAll("text")
    d3.selectAll("text")
    .transition()
    .duration(1000)

    .data(data)
    .enter()
    .append("text")
    .text(function(d) {
        return d.newNames;
   })
   .attr("x", function(d) {
        return xScale(d.xx);
   })
   .attr("y", function(d) {
        return yScale(d.yy);
   })
   .attr("font-family", "sans-serif")
   .attr("font-size", "11px")
   .attr("fill", "black")
   })
</code></pre>

<p>Which does not work and does not show the text but also raises no errors in the console. I have done this before with svg shapes and it works the exact same way but for whatever reason I cant seem to get it to transition with text any help is appreciated Thanks</p>