title: d3 ID selector can't select
body: <p>I am using d3 to create a force nodes model. I meet an error that ID selector can't find node with certain ID. What I want to do is when your mouse moves onto the node a text shows up and when mouse leaves it disappears. But my problem is it won't disappear because the selector can't find it.</p>
  
  <p>I am pretty new to d3 so I copy many codes from many examples to it looks in a mess. I attach the whole code so that you can run it in the browser directly. You can look <code>handleMouseOut</code> and <code>handleMouseOver</code> to watch over the main point.</p>
  
  <p>The problem looks like </p>
  
  <pre><code>Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#t330.17798857827233-303.63309689212775-4' is not a valid selector.
  </code></pre>
  
  <p>But the text with that ID is already there. Could you help me to fix this?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Force Layout with labels on edges&lt;/title&gt;
  &lt;script src="http://d3js.org/d3.v3.min.js" charset="utf-8"&gt;&lt;/script&gt;
  &lt;style type="text/css"&gt;
        div.tooltip { 
          position: absolute;     
          text-align: center;     
          width: 60px;          
          height: 28px;         
          padding: 2px;       
          font: 12px sans-serif;    
          background: lightsteelblue; 
          border: 0px;    
          border-radius: 8px;     
          pointer-events: none;     
      }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;script type="text/javascript"&gt;
  
      var w = 1000;
      var h = 600;
      var linkDistance=200;
      radius = 20;
  
      var colors = d3.scale.category10();
  
      var dataset = {
  
      nodes: [
      {name: "Adam"},
      {name: "Bob"},
      {name: "Carrie"},
      {name: "Donovan"},
      {name: "Edward"},
      {name: "Felicity"},
      {name: "George"},
      {name: "Hannah"},
      {name: "Iris"},
      {name: "Jerry"}
      ],
      edges: [
      {source: 0, target: 1, weight:1},
      {source: 0, target: 2, weight:1},
      {source: 0, target: 3, weight:1},
      {source: 0, target: 4, weight:1},
      {source: 1, target: 5, weight:1},
      {source: 2, target: 5, weight:1},
      {source: 2, target: 5, weight:1},
      {source: 3, target: 4, weight:1},
      {source: 5, target: 8, weight:1},
      {source: 5, target: 9, weight:1},
      {source: 6, target: 7, weight:1},
      {source: 7, target: 8, weight:1},
      {source: 8, target: 9, weight:1}
      ]
      };
  
  
      var svg = d3.select("body").append("svg").attr({"width":w,"height":h}).call(d3.behavior.zoom().on("zoom", function () {
            svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")")
          })).append("g");;
  
      var force = d3.layout.force()
          .nodes(dataset.nodes)
          .links(dataset.edges)
          .size([w,h])
          .linkDistance([linkDistance])
          .charge([-500])
          .theta(0.1)
          .gravity(0.05)
          .start();
  
      var circleAttrs = {
            r: radius,
        };
  
         // Define the div for the tooltip
        var div = d3.select("body").append("div") 
          .attr("class", "tooltip")       
          .style("opacity", 0);
  
      var edges = svg.selectAll("line")
        .data(dataset.edges)
        .enter()
        .append("line")
        .attr("id",function(d,i) {return 'edge'+i})
        .style("stroke","#000")
        .style("stroke-width", function(d,i) {return d.weight + "px"})
        .style("pointer-events", "none");
  
      var nodes = svg.selectAll("circle")
        .data(dataset.nodes)
        .enter()
        .append("circle")
        .attr(circleAttrs)  // Get attributes from circleAttrs var
        .on("mouseover", handleMouseOver)
        .on("mouseout", handleMouseOut)
        .on("click", clicked)
        .style("fill",function(d,i){return colors(i);})
        .call(force.drag)
  
  /*    svg.selectAll("circle")
            .data(dataset)
            .enter()
            .append("circle")
            .attr(circleAttrs)  // Get attributes from circleAttrs var
            .on("mouseover", handleMouseOver)
            .on("mouseout", handleMouseOut)
            .on("click", clicked);*/
  
  
      var nodelabels = svg.selectAll(".nodelabel") 
         .data(dataset.nodes)
         .enter()
         .append("text")
         .attr({"x":function(d){return d.x;},
                "y":function(d){return d.y;},
                "class":"nodelabel",
                "stroke":"black"})
         .text(function(d){return d.name;});
  
      var edgepaths = svg.selectAll(".edgepath")
          .data(dataset.edges)
          .enter()
          .append('path')
          .attr({'d': function(d) {return 'M '+d.source.x+' '+d.source.y+' L '+ d.target.x +' '+d.target.y},
                 'class':'edgepath',
                 'fill-opacity':0,
                 'stroke-opacity':0,
                 'fill':'blue',
                 'stroke':'red',
                 'id':function(d,i) {return 'edgepath'+i}})
          .style("pointer-events", "none");
  
      var edgelabels = svg.selectAll(".edgelabel")
          .data(dataset.edges)
          .enter()
          .append('text')
          .style("pointer-events", "none")
          .attr({'class':'edgelabel',
                 'id':function(d,i){return 'edgelabel'+i},
                 'dx':80,
                 'dy':0,
                 'font-size':10,
                 'fill':'#aaa'});
  
      edgelabels.append('textPath')
          .attr('xlink:href',function(d,i) {return '#edgepath'+i})
          .style("pointer-events", "none")
          .text(function(d,i){return 'label '+i});
  
  
      svg.append('defs').append('marker')
          .attr({'id':'arrowhead',
                 'viewBox':'-0 -5 10 10',
                 'refX':25,
                 'refY':0,
                 //'markerUnits':'strokeWidth',
                 'orient':'auto',
                 'markerWidth':10,
                 'markerHeight':10,
                 'xoverflow':'visible'})
          .append('svg:path')
              .attr('d', 'M 0,-5 L 10 ,0 L 0,5')
              .attr('fill', '#ccc')
              .attr('stroke','#ccc');
  
  
      force.on("tick", function(){
  
          edges.attr({"x1": function(d){return d.source.x;},
                      "y1": function(d){return d.source.y;},
                      "x2": function(d){return d.target.x;},
                      "y2": function(d){return d.target.y;}
          });
  
          nodes.attr({"cx":function(d){return d.x;},
                      "cy":function(d){return d.y;}
          });
  
          nodelabels.attr("x", function(d) { return d.x; }) 
                    .attr("y", function(d) { return d.y; });
  
          edgepaths.attr('d', function(d) { var path='M '+d.source.x+' '+d.source.y+' L '+ d.target.x +' '+d.target.y;
                                             //console.log(d)
                                             return path});       
  
          edgelabels.attr('transform',function(d,i){
              if (d.target.x&lt;d.source.x){
                  bbox = this.getBBox();
                  rx = bbox.x+bbox.width/2;
                  ry = bbox.y+bbox.height/2;
                  return 'rotate(180 '+rx+' '+ry+')';
                  }
              else {
                  return 'rotate(0)';
                  }
          });
      });
  
      var formatTime = function(){
          return 'time';
        };
  
        // Create Event Handlers for mouse
        function handleMouseOver(d, i) {  // Add interactivity
              div.transition()    
                  .duration(200)    
                  .style("opacity", .9);    
              div .html(formatTime(d.date) + "&lt;br/&gt;"  + d.close)  
                  .style("left", (d3.event.pageX) + "px")   
                  .style("top", (d3.event.pageY - 28) + "px");
  
              // Use D3 to select element, change color and size
              d3.select(this).attr({
                fill: "orange",
                r: radius+10
              });
  
              // Specify where to put label of text
              svg.append("text").attr({
                  id: "t" + d.x + "-" + d.y + "-" + i,  // Create an id for text so we can select it later for removing on mouseout
                  x: function() { return d.x - 30; },
                  y: function() { return d.y - 15; }
              })
              .text(function() {
                console.log(d);
                return [d.x, d.y];  // Value of the text
              });
  
            }
  
        var clickScale = 2.0;   // scale used when circle is clicked
  
        function clicked(d, i) {
          if (d3.event.defaultPrevented) {
          return; // panning, not clicking
          }
          node = d3.select(this);
          var transform = getTransform(node, clickScale);
          svg.transition().duration(1000)
             .attr("transform", "translate(" + transform.translate + ")scale(" + transform.scale + ")");
          d3.behavior.zoom().scale(transform.scale)
              .translate(transform.translate);
          scale = transform.scale;
        }
  
        function getTransform(node, thisScale) {
          bbox = node.node().getBBox();
          var bx = bbox.x;
          var by = bbox.y;
          var bw = bbox.width;
          var bh = bbox.height;
          var tx = -bx*thisScale + w/2 - bw*thisScale/2;
          var ty = -by*thisScale + h/2 - bh*thisScale/2;
          return {translate: [tx, ty], scale: thisScale}
        }
  
        function handleMouseOut(d, i) {
              div.transition()    
                  .duration(500)    
                  .style("opacity", 0); 
              // Use D3 to select element, change color back to normal
              d3.select(this).attr({
                fill: "grey",
                r: radius
              });
  
              // Select text by id and then remove
  
              d3.select("#t" + d.x + "-" + d.y + "-" + i).remove();  // Remove text location
            }
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>