title: d3.js move node and label together
body: <p>In our project I want to add cicrles dynamically when the add node button is clicked and link these circles with an arrow. But When I linked the circles labels of the circles do not move together with  circles. The code is below.</p>
  
  <p>JS Fiddle Link: <a href="http://jsfiddle.net/pinargocebe/kEhes/3/" rel="nofollow">http://jsfiddle.net/pinargocebe/kEhes/3/</a></p>
  
  <p>How can I solve this problem?  </p>
  
  <p>Thanks in advance..</p>
  
  <pre><code> &lt;!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
   &lt;ui:composition xmlns="http://www.w3.org/1999/xhtml"
  xmlns:s="http://jboss.com/products/seam/taglib"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:a4j="http://richfaces.org/a4j"
  xmlns:rich="http://richfaces.org/rich" template="layout/template.xhtml"&gt;
  &lt;ui:define name="body"&gt;
      &lt;a4j:commandButton value="Add Node" onclick="mousedown();"&gt; 
     &lt;/a4j:commandButton&gt;
      &lt;div id="activationGraphDiv" style="width: 960px; height: 500px"&gt;
      &lt;/div&gt;
      &lt;rich:popupPanel id="addnode" width="100" height="100"&gt;
          &lt;h:form&gt;
              &lt;h:outputLabel value="http://add.mode.deneme#relation" /&gt;
              &lt;a4j:commandButton value="OK"
                  onclick="#{rich:component('addnode')}.hide()"&gt;
  &lt;/a4j:commandButton&gt;
          &lt;/h:form&gt;
      &lt;/rich:popupPanel&gt;
      &lt;style type="text/css"&gt;
  rect {
  fill: none;
  pointer-events: all;
  }
  
  .node {
  fill: white;
  stroke: pink;
  stroke-width: 2;
  color: black;
  }
  
  .cursor {
  fill: none;
  pointer-events: none;
  }
  
  .link {
  stroke: #999;
  }
  
  path,line {
  stroke: silver;
  stroke-width: 2;
  fill: none;
  }
  &lt;/style&gt;
      &lt;script src="jquery.pack.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
  
  var width = 960,
      height = 500;
  
  var sourceNode,targetNode;
  
  var fill = d3.scale.category20();
  
  var force = d3.layout.force()
      .size([width, height])
      .gravity(.05)
  .charge(-450)
  .linkDistance(200)
      .on("tick", tick);
  
  var svg = d3.select("#activationGraphDiv").append("svg")
  .attr("width", width)
  .attr("height", height)
  .on("mousemove", mousemove);
  
  svg.append("rect")
  .attr("width", width)
  .attr("height", height);
  
  // Draw Lines
  var container = $('#activationGraphDiv');
  
  var line = d3.svg.line()
              .x(function(d) { return d[0]; })
              .y(function(d) { return d[1]; })
              .interpolate('linear');
   svg
  .append('svg:path')
  .style('stroke-width', 1)
  .style('stroke', 'silver')
  .style('fill', 'rgba(120, 220, 54, 0.2)');
  
  var lineData = [];
  
  var redrawLine = function() {
  var svgLines = svg.selectAll('path.my-lines')
                      .data(lineData)
                      .remove();
  svgLines.enter()
          .append('path')
          .attr('d', line(lineData))
          .attr('class', 'my-lines');
  
  svgLines.exit()
          .remove();
  };
  
  var mouseIsDown = false;  
  container.on('mousemove', function(e) {
      if (mouseIsDown &amp;amp;&amp;amp; sourceNode!=null) {
          lineData[1] = [e.offsetX, e.offsetY];
          redrawLine();    
      }})
      .on('mouseup',function(){
          sourceNode=null;
          targetNode=null;
          mouseIsDown=false;
          svg.selectAll('path.my-lines')
              .data(lineData)
              .remove();
      });
  
  
  var nodes = force.nodes(),
  links = force.links(),
  node=svg.selectAll(".node"),
  link = svg.selectAll(".link"),
  text=svg.selectAll(".nodetext");
  
  var cursor = svg.append("circle")
  .attr("r", 0)
  .attr("class", "cursor");
  
  restart();
  
  function mousemove() {
      cursor.attr("transform", "translate(" + d3.mouse(this) + ")");
  }
  
  var i=0;
  
  function mousedown() {
  //x coordinate of node..
  var x=document.getElementById("activationGraphDiv").offsetLeft;
  
  //y coordinate of node..
  var y=document.getElementById("activationGraphDiv").offsetTop;
  var node = {x:x, y: y, name: i},
    n = nodes.push(node);
    i++;
    console.log("node name: "+node.name);
    restart();
    sourceNode=null
    targetNode=null;
    mouseIsDown=false;
  }
  
  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; });
  
   text.attr("x", function(d) {return d.x; })
  .attr("y", function(d) { return d.y; });
  }
   svg.append("svg:defs").selectAll("marker")
   .data(["arrow"])
   .enter().append("svg:marker")
   .attr("id", String)
   .attr("viewBox", "0 -5 10 10")
   .attr("refX", 10)
   .attr("refY", 0)
   .attr("markerWidth", 10)
   .attr("markerHeight", 10)
   .attr("orient", "auto")
   .append("svg:path")
   .attr("d", "M0,-5L10,0L0,5");
  
   function restart() {
      node = node.data(nodes);
  
   node.enter().insert("circle")
    .attr("class", "node")
    .attr("id",function(d){return d.name;})
    .attr("r", 15);
  
  //Insert text to node..
   text=svg.selectAll(".nodetext")
      .data(nodes)
      .enter()
      .append("text")
      .attr("class","nodetext")
      .text(function(d){return d.name;})
      .attr("dx", 13)
      .attr("dy", ".35em");
  
    d3.selectAll(".node").on("mousedown",function(d){ 
      if(sourceNode==null){
          mouseIsDown = true; 
          lineData[0] = [d3.mouse(this)[0], d3.mouse(this)[1]];
          redrawLine();
          sourceNode=d.index;
          console.log("Source node: "+d.name);
      } 
   })
    .on("mouseup",function(d){ 
      if(targetNode==null &amp;amp;&amp;amp; sourceNode!=null &amp;amp;&amp;amp; mouseIsDown){
          targetNode=d.index;
          links.push({source: sourceNode, target: targetNode});
          lineData[1] = [d3.mouse(this)[0], d3.mouse(this)[1]];
          redrawLine(); 
          console.log("Target node: "+d.name);
          sourceNode=null;
          targetNode=null;
          mouseIsDown = false;
          svg.selectAll('path.my-lines')
              .data(lineData)
              .remove();
          restart();
      }
    });
  
   link = link.data(links);
  
   link.enter().insert("line")
        .attr("class", "link");
   link.attr("marker-end", "url(#arrow)");
   force.start();
   }
   &lt;/script&gt;
  &lt;/ui:define&gt;
  &lt;/ui:composition&gt;
  </code></pre>