title: how to add tooltip for rectangles in d3.js reading from json
body: <p>I would like to create rectangles and have a tooltip for the same. </p>
  
  <p>My json data is :</p>
  
  <pre><code>[
     [{ "a":10},{"b":11}],
     [{ "c":1},{"d":1}]
  ]
  </code></pre>
  
  <p>My code is :</p>
  
  <pre><code>var svggraph = d3.select("#graph").append("svg").attr("id","svggraph")
      .attr("width", 400)
      .attr("height", 300)
      .append("g")
      .attr("transform", "translate(50," + margin.top + ")");
  
  var yvar = 20;
  var x_axis = 1;
  
  d3.json("Data.json", function(data) 
      {
          rectdata = data;
  
          for(x=0;x&lt;rectdata.length;x++)
          {
  
            console.log(rectdata[x]);
            for (index=0;index&lt;2; index++)
            {
              svggraph.append("rect")
                                .attr("x", setxaxis(index)) 
                                .attr("y", setyaxis(yvar))
                                .attr("width", 20)
                                .attr("height", 21)
                                .style("fill","white")    
                                .style("stroke","black");
                    svggraph.append("svg:title").text(function(d) { return "Tooltip"; });
  
            }
  
              yvar = yvar+21;
          }
  
  
  
      });
  
  
  
  function setxaxis(x)
  {
  
  
      if (x==4) return;
  
      if(x==0) 
      {
          return x_axis=0
      }
      else
      {
          x_axis=x_axis+25;
      }
  
      return x_axis; 
  
  }
  function setyaxis(y)
  {
  
      return y; 
  
  
  }
  </code></pre>
  
  <p>how to add tooltip like "a:10" or "b:11" on the  2X2 rectangle array created on the corresponding rectangles?</p>